"Circle" est un plugin JavaScript qui permet de dessiner des arcs de cercle(s) avec une balise Canvas, un minimum de JavaScript, et avec des longueurs en pourcentages !
Pour en savoir plus sur le Canvas, il est possible de lire l'Utilisation de base des canvas et la description de la méthode "arc" de l'API Canvas 2D sur le Mozilla Developer Network (MDN).
Créer un conteneur graphique canvas HTML
Pour commencer, on ajoute une balise Canvas dans le corps du HTML (DOM), pour laquelle on spécifie un identifiant, une largeur et une hauteur. Cette balise va rester vide tant que JavaScript n'aura pas été utilisé pour dessiner à l'intérieur.
<!DOCTYPE html>
<html>
<body>
<canvas id="monCanvas" width="500" height="300"></canvas>
</body>
</html>Créer un cercle avec JavaScript
À partir de là, JavaScript prend le relai, et on déclare dans une balise "script" une variable qui cible l'élément Canvas avec lequel on va interagir.
Après avoir inséré le script "Circle" (en téléchargement à la fin de cet article), on peut créer un objet "Circle" qui servira à dessiner nos arcs... de cercle. Cet objet prend en argument l'élément qu'on a définit plus tôt.
<!DOCTYPE html>
<html>
<head>
<script src="Circle.js"></script>
</head>
<body>
<canvas id="monCanvas" width="500" height="300"></canvas>
<script>
var monCanvas = document.getElementById('monCanvas');
var monCercle = new Circle(monCanvas);
</script>
</body>
</html>Ajouter des arcs de cercle
On peut alors ajouter des arcs de cercles en utilisant la méthode "arc" de l'objet "Circle". Cette méthode prend en argument un objet de paramètres permettant de dessiner l'arc, comme par exemple les tailles et couleurs que l'on souhaite appliquer à notre arc.
Une description de ces styles Canvas est disponible avec le tutoriel sur les Canvas du MDN : "Ajout de styles et de couleurs".
...
<script>
var monCanvas = document.getElementById('monCanvas');
var monCercle = new Circle(monCanvas);
monCercle.arc({
strokeStyle: '#00FF00'
});
</script>
...Ajuster la longueur des arcs en pourcentage
Par défaut, l'arc de cercle est d'une longueur de 100% de la circonférence du cercle. Il est possible d'ajouter un paramètre "percent" propre au plugin pour définir une taille en pourcentage particulière.
Dès lors, il est possible d'ajouter plusieurs arcs qui se suivent dans le même cercle en appliquant la méthode "arc" en appliquant un pourcentage avec le paramètre "percent".
...
monCercle.arc({
strokeStyle: '#00FF00',
percent: 20
});
monCercle.arc({
strokeStyle: '#FF00FF',
percent: 40
});
...Ajuster le rayon des arcs de cercle
Par défaut, le rayon de l'arc correspond au rayon du cercle. Il est possible d'ajouter un paramètre "radius" propre au plugin pour définir le rayon à appliquer aux arcs à dessiner. La valeur de ce paramètre correspond au nombre de pixels à retirer ou à ajouter à la taille du rayon initial.
...
monCercle.arc({
strokeStyle: '#FF00FF',
percent: 40,
radius: 30
});
...Ajuster l'angle de départ du tracé des arcs
Finalement, un dernier paramètre permet de modifier l'angle de départ du tracé des arcs de l'objet cercle.
Lorsque l'on créée l'objet "Circle", il est possible de passer en second argument une valeur numérique correspondant à l'angle de départ. Les 4 angles principaux pouvant être :
- Départ en haut (par defaut) : 4.7
- Départ à droite : 0
- Départ en bas : -4.72
- Départ à gauche : 9.4305
Pour un départ en haut par défaut, on pourrait avoir la création de l'objet comme l'exemple qui suit :
...
var monCercle = new Circle(monCanvas, 4.7);
...Exemple complet et téléchargement
C'est la fin de cet article, voici un exemple d'affichage de plusieurs cercles avec des arcs différents dans un même graphique, avec - bien sûr - le plugin comme annoncé plus haut :)
Cet article vous a-t-il été utile ?
Super :)
Merci d'avoir donné votre avis !
Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !