Utilisez Canvas pour dessiner un cercle non fermé avec une barre de progression

Auteur：Eve Cole Date de mise à jour：2025-01-17 18:00:02

rendus finaux

1. Définir les variables

Définissez le rayon, définissez l'épaisseur de l'anneau, définissez la position centrale du cercle et définissez la couleur de remplissage par défaut

 laissez rayon = 75let épaisseur= 10let innerRadius = rayon - épaisseurlet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = #f2d7d7;

2. Dessinez le premier arc

 ctx.beginPath();ctx.arc(x, y, rayon, Math.PI * 1.5, Math.PI)

Faites attention à la méthode startPath(), la première étape dans la génération d'un chemin. Essentiellement, un chemin est composé de nombreux sous-chemins, qui sont tous répertoriés dans une liste, et tous les sous-chemins (lignes, arcs, etc.) forment une forme. Chaque fois que cette méthode est appelée, la liste est effacée et réinitialisée, puis nous pouvons redessiner un nouveau graphique.

En d'autres termes, cette méthode peut être utilisée pour regrouper des images Canvas et dessiner de nouveaux graphiques. Si cette méthode n'est pas appelée, les nouveaux graphiques seront connectés aux graphiques précédents.

3. Dessinez la première connexion

 ctx.quadraticCurveTo((x - innerRadius) - épaisseur / 2, y - épaisseur, x - innerRadius, y)

La connexion est tracée à l'aide d'une courbe de Bézier quadratique. La méthode quadraticCurveTo(cp1x, cp1y, x, y) de Canvas accepte 4 paramètres. Les premier et deuxième paramètres sont les points de contrôle, et les troisième et quatrième paramètres sont les extrémités. le document officiel

Déterminez simplement les points de contrôle et les points finaux pour dessiner un arc

4. Dessinez le deuxième arc

 ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, vrai)

Faites attention au dernier paramètre après la méthode. Définissez-le sur true, ce qui signifie dessiner dans le sens inverse des aiguilles d'une montre (la valeur par défaut est dans le sens des aiguilles d'une montre).

5. Dessinez la deuxième connexion

 ctx.quadraticCurveTo(y - épaisseur, (x - innerRadius) - épaisseur / 2, x, y - innerRadius - épaisseur)

Cette étape n'est en fait pas très différente de la troisième étape. Nous avons simplement modifié les positions des paramètres.

6. Remplissage

 ctx.fill();

À ce stade, un simple anneau non fermé est complété

Dessinez un deuxième anneau de barre de progression

7. Initialisation

 ctx.beginPath();ctx.fillStyle = #e87c7c;

BeginPath signifie dessiner un nouveau graphique. Si cette méthode n'est pas appelée, le graphique dessiné ultérieurement sera connecté au graphique dessiné précédemment.

8. Dessinez le deuxième anneau de la barre de progression

 ctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, rayon, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + épaisseur / 2, y + épaisseur, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y - épaisseur, (x - innerRadius) - épaisseur / 2, x, y - innerRadius - épaisseur)ctx.fill();

Puisque la méthode de dessin est exactement la même que celle du premier cercle, il n’est pas nécessaire de la répéter. La différence réside uniquement dans l’arc du cercle.

9. Faire pivoter la toile

 transformation : rotation (-135 deg );

Étant donné que la rotation CSS est plus pratique et enregistre le calcul de l'angle, j'utilise la transformation CSS pour faire pivoter. Bien entendu, Canvas propose également des méthodes de rotation

Code complet

 <!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>canvas</title> <style> .ring { largeur : 150px hauteur : 150px ; flex; align-items: center; justification-content: center; flex-direction: column position: relative } #tutoriel { transform: width: 150px; height: 150px; absolu ; taille de la police : 30 px ; poids de la police : gras ; couleur : rouge } .small { taille de la police : 12 px ; font-weight : plus léger ; } .title { couleur : rouge ; bas : 0 ; position : absolue } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>Points</span> </span> <span class=title>Points de service</span> </div> <script> soit rayon = 75 let épaisseur = 10 let innerRadius = rayon - épaisseur let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(x, y, rayon, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - épaisseur/2 , y - épaisseur, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - épaisseur, (x - innerRadius) - épaisseur / 2, x, y - innerRadius - épaisseur) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, rayon, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + épaisseur / 2, y + épaisseur, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - épaisseur, (x - innerRadius) - épaisseur / 2, x, y - innerRadius - épaisseur) ctx.fill(); </script></body></html>

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.