Exemplo de código para canvas para implementar animação circular de barra de progresso

Este artigo apresenta a implementação da animação da barra de progresso circular na tela e a compartilha com todos. Os detalhes são os seguintes:

Deixe-me mostrar as renderizações primeiro e depois adicionar o código.

animação da barra de progresso

A largura e a altura da tela são propriedades próprias e devem ser definidas no estilo entrelinhas. Se você definir a largura e a altura no estilo, a imagem desenhada será deformada.

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

Idéia principal: A renderização é composta por três círculos. A camada mais externa é um círculo grande com bordas pretas, dentro de um círculo que altera o progresso da barra de progresso e um círculo com uma porcentagem realista.

Nota: Cada vez que um círculo é desenhado, uma nova camada deve ser criada, para que o estilo de cada camada possa ser definido de forma independente, sem afetar uns aos outros. Assim como as camadas no PS, um rascunho de design completo é composto por muitas camadas.

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function draw(i){// Quadro circular grande context.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Math.PI*2);context.strokeStyle = cinza;context.stroke();// Grande círculo context.beginPath();var grd = context.createLinearGradient(15,15,80,80);grd.addColorStop(0,vermelho);grd.addColorStop(0,5,amarelo);grd.addColorStop(1,azul);context.arc(50,50,38, 0,Math.PI*2*(i/100));context.lineWidth = 16;context.strokeStyle = grd;context.stroke();// context.fillStyle = grd;// context.fill();// pequeno círculo context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context.strokeStyle = cinza;context.stroke();context.fillStyle = branco;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = black;context.fillText(i+%,50 , 50);}

Use o método context.clearRect() para limpar a tela

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

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.