Código de muestra para lienzo para implementar la animación de la barra de progreso circular

Este artículo presenta la implementación de la animación de la barra de progreso circular en el lienzo y la comparte con todos. Los detalles son los siguientes:

Déjame mostrarte las representaciones primero y luego agregar el código.

animación de la barra de progreso

El ancho y el alto del lienzo son sus propias propiedades y deben establecerse en el estilo entre líneas. Si establece el ancho y el alto en el estilo, la imagen que dibuje se deformará.

 <canvas id=mycanvas ancho=100 alto=100>70%</canvas>

Idea principal: el renderizado se compone de tres círculos. La capa más externa es un círculo grande con bordes negros, dentro de un círculo que cambia el progreso de la barra de progreso y un círculo con un porcentaje realista.

Nota: Cada vez que se dibuja un círculo, se debe crear una nueva capa, de modo que el estilo de cada capa se pueda configurar de forma independiente sin afectarse entre sí. Al igual que las capas en PS, un borrador de diseño completo se compone de muchas capas.

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function draw(i){// Marco circular grande context.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Math.PI*2);context.strokeStyle = gris;context.stroke();// Gran círculo context.beginPath();var grd = context.createLinearGradient(15,15,80,80);grd.addColorStop(0,rojo);grd.addColorStop(0.5,amarillo);grd.addColorStop(1,azul);context.arc(50,50,38, 0,Matemáticas.PI*2*(i/100));context.lineWidth = 16;context.strokeStyle = grd;context.stroke();// context.fillStyle = grd;// context.fill();// círculo pequeño context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context.strokeStyle = gris;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);}

Utilice el método context.clearRect() para limpiar el lienzo

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

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.