Canvas : demi- cercles

Le script de la page

Je ne vous communique plus le code CSS et le code HTML puisque c'est toujours pareil ...
La zone de dessin Canvas fait 150 par 100.

<script> canevas = document.querySelector('canvas'); contexte = canevas.getContext('2d'); X = canevas.width ; Y = canevas.height ; contexte.fillStyle ='orange'; contexte.beginPath(); // début nouveau chemin contexte.arc(X/3, Y/2, X/6, 0, Math.PI); //premier demi cercle contexte.fill(); contexte.arc(X/3*2, Y/2, X/6, Math.PI, Math.PI*2); //deuxième demi-cercle contexte.fill(); </script>

Commentaire du code

Rappel : pour dessiner un arc de cercle il faut utiliser la méthode arc().

Par défaut les arcs de cercle sont dessinés dans le sens inverse des aiguilles d'une montre.

Le schéma ci-dessus vous aide à déterminer l'angle de départ et l'angle d'arrivée.
Sur ce schéma le point 0 est aussi le point 2 (2 π radians).

Ainsi pour dessiner le premier demi cercle : angle de départ : 0 et angle d'arrivée 1 π radians (Math.PI)
Et pour dessiner le deuxième demi cercle : angle de départ : 1 π radian (Mat.PI) et angle d'arrivée : 2 π radians (Math.PI*2)

Comme dans la page précédente, les coordonnées du centre et le rayon de chaque demi-cercle sont exprimées en fonction de X et Y (dimensions du Canvas). Donc même si vous modifiez les dimensions de la zone de dessin le code JavaScript n'a pas à être amendé. Retour menu