Canvas : deux cercles (bug)

Le script de la page

La zone de dessin Canvas fait 200px par 200px.

<script> var canevas = document.querySelector('canvas'); var contexte = canevas.getContext('2d'); var X = canevas.width ; var Y = canevas.height ; contexte.arc(X/4, Y/4, X/4, 0, Math.PI*2); contexte.fillStyle ='yellow'; contexte.fill(); // deuxième cercle contexte.arc(X/2, Y/2, X/4, 0, Math.PI*2); contexte.lineWidth= 5; contexte.strokeStyle = 'orange'; contexte.stroke(); </script>

Commentaire du script

Dans l'exemple les coordonnées du centre et le rayon des cercles sont exprimées en fonction de X et Y (dimensions du Canvas). Donc si vous changez les dimensions de la zone de dessin (attributs width et height de la balise canvas) vous n'aurez rien à changer dans le code JavaScript. Pratique, n'est-ce pas !

Les variables X et Y récupèrent les dimensions du canevas grâce aux propriétés width, height appliquées à la variable objet canevas (variable objet qui référence la balise canvas).

Pour dessiner un arc de cercle voire un cercle il faut utiliser la méthode arc.

L'unité de mesure (radian) est implicite et ne doit pas être précisée.
En JavaScript, pour désigner la constante π on utilise la propriété PI de l'objet Math : Math.PI

Il y a cependant un gros bug dans notre code ! Il y a en effet un segment disgracieux entre les deux cercles ! La raison est simple : nous avons oublié de "lever le crayon" entre les deux cercles !

Pour avoir un code correct il faut insérer une instruction juste avant "contexte.arc()" du deuxième cercle :
contexte.beginPath() ; // début d'un nouveau chemin Consultez le dessin correct

Si vous zoomez la page à 500% vous constatez l'effet "crénelage" (ou effet "escalier").C'est l'inconvénient des images matricielles. Retour menu