Beispielcode für Canvas zur Implementierung einer kreisförmigen Fortschrittsbalkenanimation

In diesem Artikel wird die Implementierung der kreisförmigen Fortschrittsbalkenanimation auf Leinwand vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Lassen Sie mich Ihnen zuerst die Renderings zeigen und dann den Code hinzufügen.

Animation des Fortschrittsbalkens

Die Breite und Höhe der Leinwand sind eigene Eigenschaften und müssen im Interline-Stil festgelegt werden. Wenn Sie die Breite und Höhe im Stil festlegen, wird das von Ihnen gezeichnete Bild verformt.

 <canvas id=mycanvas width=100 height=100>70 %</canvas>

Hauptidee: Das Rendering besteht aus drei Kreisen. Die äußerste Ebene ist ein großer Kreis mit schwarzen Rändern, innen ein Kreis, der den Fortschritt des Fortschrittsbalkens ändert, und ein Kreis mit einem realistischen Prozentsatz.

Hinweis: Jedes Mal, wenn ein Kreis gezeichnet wird, muss eine neue Ebene erstellt werden, damit der Stil jeder Ebene unabhängig voneinander festgelegt werden kann, ohne dass sich die Ebenen gegenseitig beeinflussen. Ein vollständiger Designentwurf besteht aus vielen Ebenen.

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function draw(i){// Großer kreisförmiger Rahmen context.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Math.PI*2);context.StrokeStyle = Gray;Context.Stroke();// Großkreis context.beginPath();var grd = context.createLinearGradient(15,15,80,80);grd.addColorStop(0,red);grd.addColorStop(0.5,yellow);grd.addColorStop(1,blue);context.arc(50,50,38, 0,Math.PI*2*(i/100));context.lineWidth = 16;context.strokeStyle = grd;context.Stroke();// context.fillStyle = grd;// context.fill();// kleiner Kreis context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context.StrokeStyle = Gray;Context.Stroke();Context.fillStyle = white;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = black;context.fillText(i+%,50 , 50);}

Verwenden Sie die Methode context.clearRect(), um die Leinwand zu löschen

 var i = 0;var progress = parseInt(canvas.innerHTML);// console.log(progress);var timer = setInterval(function(){if(i >= progress){clearInterval(timer);}context.clearRect (0,0,canvas.width,canvas.height);draw(i);i++;},50);

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.