Ein Beispiel für die Implementierung einer kreisförmigen Fortschrittsbalkenanimation auf der Leinwand

In diesem Artikel werden hauptsächlich die relevanten Informationen zur Realisierung einer kreisförmigen Fortschrittsbalkenanimation in Canvas vorgestellt. Jetzt werde ich sie mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.

Dieser Artikel stellt die Implementierung der kreisförmigen Fortschrittsbalkenanimation auf Leinwand vor und teilt sie mit allen. Die Details sind wie folgt:

Ich werde es Ihnen zeigen Zuerst Renderings und dann den Code hinzufügen.

Animation des Fortschrittsbalkens

1. Der HTML-Teil von Canvas ist sehr einfach, nur ein Canvas-Tag

Leinwand Leinwand Die Breite und Höhe sind eigene Attribute 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>

2. Canvas js-Code

Hauptidee: Das Rendering besteht aus drei Kreisen. Die äußerste Ebene ist Ein großer Kreis mit schwarzen Rändern und darin befindet sich ein Kreis, der den Fortschritt des Fortschrittsbalkens ändert, und ein Kreis, der den tatsächlichen Prozentsatz darstellt.

Hinweis: Jedes Mal, wenn Sie einen Kreis zeichnen, müssen Sie eine neue Ebene erstellen. Auf diese Weise können Sie den Stil jeder Ebene unabhängig festlegen, ohne sich gegenseitig zu beeinflussen, genau wie die Ebenen in PS, einen vollständigen Designentwurf ist Es besteht aus vielen Schichten.

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
function draw(i){
// 大圆框
context.beginPath();
context.lineWidth = 1;
context.arc(50,50,46,0,Math.PI*2);
context.strokeStyle = "grey";
context.stroke();
// 大圆
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();
// 小圆
context.beginPath();
context.arc(50,50,30,0,Math.PI*2);
context.lineWidth = 1;
context.strokeStyle = "grey";
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);
}

3. Verwenden Sie einen Timer, um die Leinwand zu aktualisieren, um den Effekt eines Fortschrittsbalkens zu erzielen.

Verwenden Sie den Kontext. clearRect() Methode zum Löschen der Leinwand

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);

Verwandte Empfehlungen:

Css3-Methode zum Implementieren eines kreisförmigen Fortschrittsbalkens

Einführung in die Methode zur Realisierung eines kreisförmigen Fortschrittsbalkens im WeChat-Applet

Empfohlene grundlegende Einführungs-Tutorials zum kreisförmigen Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Implementierung einer kreisförmigen Fortschrittsbalkenanimation auf der Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!