Sample code for canvas to implement circular progress bar animation

This article introduces the implementation of circular progress bar animation on canvas and shares it with everyone. The details are as follows:

Let me show you the renderings first, and then add the code.

progress bar animation

The width and height of the canvas are its own properties and must be set in the interline style. If you set the width and height in the style, the picture you draw will be deformed.

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

Main idea: The rendering is composed of three circles. The outermost layer is a large circle with black edges, inside a circle that changes the progress of the progress bar and a circle with a realistic percentage.

Note: Each time a circle is drawn, a new layer must be created, so that the style of each layer can be set independently without affecting each other. Just like the layers in PS, a complete design draft is composed of many layers. .

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function draw(i){// Large circular frame context.beginPath();context.lineWidth = 1;context.arc(50,50, 46,0,Math.PI*2);context.strokeStyle = gray;context.stroke();// Great circle 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();// small circle 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);}

Use the context.clearRect() method to clear the canvas

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.