Primero mira el efecto de dibujado, como se muestra en la figura a continuación, un progreso en forma redonda.
Uso el lienzo de HTML5 para hacer un progreso circular,
El primero es la página HTML, y el logotipo del documento de HTML5 es:
<!
Este logotipo de documento es mucho más simple que HTML4.
El segundo paso es crear un elemento Canvas Canvas en la página:
<Canvas class = Process Width = 48px Height = 48px> 61%</ Canvas>
Creé un lienzo con 48 píxeles de longitud y ancho aquí, porque el diámetro que quiero dibujar es de 48 píxeles, y el 61%del elemento de lona está escrito en el medio. .
Bueno, el contenido de la página HTML se completa básicamente hasta ahora, y luego se lo daré a JavaScript.
Function drawrocess () {// Seleccione todos los elementos de clase de todas las clases en la página, y luego itera cada dibujo de elementos (aquí se selecciona con la selección de jQuery) $ ('Canvas.process'). La etiqueta de lienzo primero es el 61%(el método StringTrim aquí es mi propio método. Hay muchas formas de ir antes y después. (Este $ (this) .Text ()); var proces = text.substring (0, texto. longitud-); Dibuje una imagen en este lienzo, no hay nada en el lienzo, este paso no es necesario. Moveto (24, 24); contexto en sentido horario o antihorario. // *** Pintura redonda gris terminada // Contexto de progreso de la pintura. BeginPath (); No es un contexto en forma de abanico. Moveto (24, 24); PI * 2 * 2 * 24, 24) ; / Dibujar un contexto de línea. , relleno se llena, la carrera es el contexto de la línea de dibujo. context.textalign = er ';Bueno, después de dibujar.
Tamaño: Adjunto de imagen de 2.4 kb de vista
Gracias por leer, espero ayudar a todos, ¡gracias por su apoyo para este sitio!