Exemple de code pour canevas afin d'implémenter une animation de barre de progression circulaire

Cet article présente la mise en œuvre de l'animation de la barre de progression circulaire sur le canevas et la partage avec tout le monde. Les détails sont les suivants :

Laissez-moi d'abord vous montrer les rendus, puis ajouter le code.

animation de la barre de progression

La largeur et la hauteur du canevas sont ses propres propriétés et doivent être définies dans le style interligne. Si vous définissez la largeur et la hauteur dans le style, l'image que vous dessinez sera déformée.

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

Idée principale : Le rendu est composé de trois cercles. Le calque le plus externe est un grand cercle avec des bords noirs, à l'intérieur d'un cercle qui modifie la progression de la barre de progression et d'un cercle avec un pourcentage réaliste.

Remarque : chaque fois qu'un cercle est dessiné, un nouveau calque doit être créé, afin que le style de chaque calque puisse être défini indépendamment sans s'affecter les uns les autres. Tout comme les calques dans PS, un brouillon de conception complet est composé de plusieurs calques.

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function draw(i){// Grand cadre circulaire context.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Math.PI*2);context.StrokeStyle = gray;context.Stroke();// Contexte du grand cercle.beginPath();var grd = contexte.createLinearGradient(15,15,80,80);grd.addColorStop(0,rouge);grd.addColorStop(0.5,jaune);grd.addColorStop(1,bleu);context.arc(50,50,38, 0,Math.PI*2*(i/100));context.lineWidth = 16;context.StrokeStyle = grd;context.Stroke();// context.fillStyle = grd;// context.fill();// petit cercle context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context.StrokeStyle = gray;context.Stroke();context.fillStyle = blanc;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = black;context.fillText(i+%,50 , 50);}

Utilisez la méthode context.clearRect() pour effacer le canevas

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

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.