A tela HTML5 percebe a barra de progresso redonda e exibe o exemplo de efeito percentual digital

Este artigo apresenta a tela HTML5 para obter uma barra de progresso circular e exibir o exemplo de efeito percentual digital.

Alcançar efeito

1. Crie o código HTML primeiro

 <canvas id = largura da tela = 500 altura = 500 estilo = fundo:#000;> </lvas>

2. Crie ambiente de tela

 var Canvas = document.getElementById ('Canvas'), // Obtenha o elemento de tela context = Canvas.getContext ('2d'), // Obtenha o ambiente de desenho, indique como 2d Centerx = Canvas.width/2, // Centro de Canva Centro de coordenadas do eixo x -eixo = Canvas.Height/2, // Ponto central de tela Y -eixo coordena Rad = Math.pi*2/10, // Divida 360 graus em 100 cópias, então cada um é o grau Rad Velocidade = 0,1; / / carrega o rápido e lento, basta confiar nele

3. Desenhe 5 pixels de largura esportiva círculos externos

 // 绘制 5 像素宽的运动外圈 função bluecircle (n) {context.save (); ); ângulo, no sentido horário/anti -horário) context.stroke ();

4. Desenhe o anel externo branco

 // Desenhe a função do círculo externo branco Whitecircle () {context.Save (); , false);

5. Desenho de texto por cento

 Função Texto (n) {context.Save (); // Defina o tamanho da fonte e a fonte // desenhe a fonte e o contexto de posição especificado.STROKETEXT (N.Tofixed (0)+%, Centerx-25, Center+10); Drawings.restore ();}

6. Deixe se exercitar

 // O ciclo de animação (função drawFrame () {window.requestanimationframe (drawFrame); context.clearrect (0, 0, canvas.width, canvas.Height); whitecircle (); te xt (speed); bluecircle (velocidade); If (if (velocidade> 100) velocidade = 0; velocidade+= 0,1;} ());

Código completo

 <! {Text-align: Center; script> window.onload = function () {var Canvas = document.getElementById ('Canvas'), // Obtenha o elemento de tela context = Canvas.getContext ('2D'), / / ​​/ / Obtenha o ambiente de imagem, indica que indique a 2d Centerx = Canvas.Width/2, // Centro de tela X -AXIS CENDRY = Canvas.Height/2, // Ponto central de tela Y -AXIS RAD = MATH.PI*2/100, // Divida 360 graus Em 100 porções, toda parte é a velocidade do grau Rad = 0,1; context.strokestyle = #fff; .pi/2, -math.pi/2 +n*rad, false); (); Context.LineWidth = 2; ); / Defina o estilo de desenho do estilo de desenho.Font = 40px. , centro 10); 0.1;} ());} </cript> </body> </html>

O acima é todo o conteúdo deste artigo.