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 ella3. 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.