Examples of how to implement circular progress bar animation on canvas

This article mainly introduces the relevant information about realizing circular progress bar animation in canvas. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

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

1. The HTML part of canvas is very simple, just a canvas tag

canvas canvas The width and height are its own attributes 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>

2. Canvas js code

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

Note: Each time you draw a circle, you must create a new layer. This way you can set the style of each layer independently without affecting each other. Just like the layers in PS, a complete design draft is It is composed of many layers.

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. Use a timer to refresh the canvas to achieve the effect of a progress bar

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

Related recommendations:

How to implement a circular progress bar in css3

Introduction to the method of realizing circular progress bar in WeChat applet

Recommended basic introductory tutorials on circular progress bar

The above is the detailed content of Examples of how to implement circular progress bar animation on canvas. For more information, please follow other related articles on the PHP Chinese website!