El lienzo HTML5 se da cuenta de la barra de progreso redonda y muestra el ejemplo del efecto porcentual digital

Este artículo presenta el lienzo HTML5 para lograr una barra de progreso circular y mostrar el ejemplo de efecto porcentual digital.

Lograr un efecto

1. Primero cree el código HTML

 <Canvas ID = Canvas Width = 500 Height = 500 Style = Background:#000;> </Canvas>

2. Crear entorno de lienzo

 var canvas = document.getElementById ('Canvas'), // Get Canvas Element context = Canvas.getContext ('2d'), // Obtener el entorno de dibujo, indique como 2D CenterX = Canvas.Width/2, // Canva Center punto x -eje coordenadas center = Canvas.Height/2, // Central de lienzo El punto y -eje coordina rad = matemáticas Velocidad = 0.1; / / Cargue el rápido y lento, solo confíe en ella

3. Dibuja 5 píxeles de ancho Circles externos deportivos

 // 绘制 5 像素宽的运动外圈 FUNCIÓN BLUECRESTA (n) {context.save (); );/La ruta comienza el contexto. ángulo, en sentido horario/en sentido antihorario) context.stroke ();

4. Dibuja el anillo exterior blanco

 // Dibuja la función White Circle Whitecircle () {context.save (); , falso);

5. Porcentaje de dibujo de texto

 Texto de la función (n) {context.save (); // Establezca el tamaño de la fuente y la fuente // Dibuje la fuente, y la posición especificada context.StrokExtext (N.ToFixed (0)+%, CenterX-25, Center+10); dibujos.restore ();}

6. Déjalo hacer ejercicio

 // El ciclo de animación (function drawframe () {Window.RequestanimationFrame (Drawframe); context.clearrect (0, 0, Canvas.Width, Canvas.height); Whitecircle (); Te Xt (Speed); Bluecircle (velocidad); If (if (velocidad> 100) velocidad = 0; velocidad+= 0.1;} ());

Código completo

 <! {Text-Align: Center; script> window.Onload = function () {var canvas = document.getElementById ('Canvas'), // get Canvas Element context = Canvas.getContext ('2d'), / / ​​/ Obtener el entorno de imagen, indique a 2D CenterX = Canvas.Width/2, // Punto central de lienzo x -xis cendry = Canvas.height/2, // punto central de lona y -xis rad = math.pi*2/100, // divide 360 ​​grados En 100 para porciones, cada porción es la velocidad de Rad Grado = 0.1; ; .pi/2, -math.pi/2 +n*rad, falso); (); ; ) context.rest.restore (); / Establezca el estilo de dibujo del estilo de dibujo. , Center+10); 0.1;} ());} </script> </body> </html>

Lo anterior es todo el contenido de este artículo.