representaciones finales1. Definir variables
Defina el radio, defina el grosor del anillo, defina la posición central del círculo y defina el color de relleno predeterminado
let radio = 75let espesor = 10let internalRadius = radio - espesorlet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. Dibuja el primer arco. ctx.beginPath();ctx.arc(x, y, radio, Math.PI * 1.5, Math.PI)
Preste atención al método beginPath(), el primer paso para generar una ruta. Esencialmente, una ruta se compone de muchas subrutas, todas ellas en una lista, y todas las subrutas (líneas, arcos, etc.) forman una forma. Cada vez que se llama a este método, la lista se borra y se restablece, y luego podemos volver a dibujar un nuevo gráfico.
En otras palabras, este método se puede utilizar para agrupar imágenes de Canvas y dibujar nuevos gráficos. Si no se llama a este método, los nuevos gráficos se conectarán a los gráficos anteriores.
3. Dibuja la primera conexión.ctx.quadraticCurveTo((x - radio interno) - espesor / 2, y - espesor, x - radio interno, y)
La conexión se dibuja utilizando una curva de Bézier cuadrática. El método quadraticCurveTo (cp1x, cp1y, x, y) de Canvas acepta 4 parámetros. El primer y segundo parámetro son los puntos de control, y el tercer y cuarto parámetro son los extremos. el documento oficial
Simplemente determine los puntos de control y los puntos finales para dibujar un arco.
4. Dibuja el segundo arco.ctx.arc(x, y, radio interno, Math.PI, Math.PI * 1.5, verdadero)
Preste atención al último parámetro después del método. Configúrelo en verdadero, lo que significa dibujar en sentido antihorario (el valor predeterminado es en sentido horario).
5. Dibuja la segunda conexión.ctx.quadraticCurveTo(y - espesor, (x - radio interno) - espesor / 2, x, y - radio interno - espesor)
En realidad, este paso no es muy diferente del tercer paso. Simplemente cambiamos las posiciones de los parámetros.
6. Llenadoctx.fill();
En este punto, se completa un anillo simple sin cerrar.
Dibuja un segundo anillo de barra de progreso
7. Inicializaciónctx.beginPath();ctx.fillStyle = #e87c7c;
comenzarPath significa dibujar un nuevo gráfico. Si no se llama a este método, el gráfico dibujado más tarde se conectará al gráfico dibujado anteriormente.
8. Dibuja el segundo anillo de la barra de progreso.ctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, radio, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + internalRadius) + espesor / 2, y + espesor, x + radiointerno, y)ctx.arc(x, y, radiointerno, Math.PI * 2, Math.PI * 1.5, verdadero)ctx.quadraticCurveTo(y - espesor, (x - radio interno) - espesor / 2, x, y - radio interno - espesor)ctx.fill();
Dado que el método de dibujo es exactamente el mismo que el del primer círculo, no es necesario repetirlo. La diferencia es solo el arco del círculo.
9. Girar lienzotransformar: rotar (-135 grados);
Dado que la rotación CSS es más conveniente y guarda el cálculo del ángulo, utilizo la transformación CSS para rotar. Por supuesto, Canvas también proporciona métodos de rotación.
código completo
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible = es decir = borde> <título>lienzo</título> <estilo> .ring { ancho: 150px; alto: 150px; flex; alinear elementos: centro; justificar contenido: centro; dirección flexible: columna; posición: relativa;} .fracción {posición: absoluto; tamaño de fuente: 30px; peso de fuente: negrita; color: rojo } .small {tamaño de fuente: 12px; peso de fuente: más claro; } .title { color: rojo; abajo: 0; posición: absoluta } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>Puntos</span> </span> <span class=title>Puntos de servicio</span> </div> <script> let radio = 75 let espesor = 10 let internalRadius = radio - espesor let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, radio, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - radiointerno) - espesor/2, y - espesor, x - radiointerno, y) ctx.arc(x, y, radiointerno, Math.PI, Math.PI * 1.5, verdadero) ctx.quadraticCurveTo(y - espesor, (x - radio interno) - espesor / 2, x, y - radio interno - espesor) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, radio, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + radiointerior) + espesor / 2, y + espesor, x + radiointerior, y) ctx.arc(x, y, radiointerior, Math.PI * 2, Math.PI * 1.5, verdadero) ctx.quadraticCurveTo(y - espesor, (x - radiointerior) - espesor / 2, x, y - radiointerior - espesor) ctx.fill(); </script></body></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.