Canvas Coordonnées
La toile de HTML est une grille à deux dimensions.
Le coin supérieur gauche de la toile a les coordonnées (0,0)
Dans le chapitre précédent, vous avez vu cette méthode utilisée: fillRect(0,0,150,75) .
Cela signifie: Démarrer dans le coin supérieur gauche (0,0) et de dessiner un rectangle 150x75 pixels.
Coordonne Exemple
Passez la souris sur le rectangle ci-dessous pour voir ses coordonnées x et y:
Tracer une ligne
Pour tracer une ligne droite sur une toile, utilisez les méthodes suivantes:
- moveTo( x,y ) - définit le point de la ligne de départ
- lineTo( x,y ) - définit le point de la ligne de fin
Pour dessiner effectivement la ligne, vous devez utiliser l' un des "ink" méthodes, comme la stroke() .
Exemple
Définir un point de départ en position (0,0) , et un point en position de fin (200,100) . Utilisez ensuite la stroke() méthode pour tracer effectivement la ligne:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Essayez - le vous - même » Tracez un cercle
Pour dessiner un cercle sur une toile, utilisez les méthodes suivantes:
- beginPath() - commence un chemin
- arc(x,y,r,startangle,endangle) - crée un arc / courbe. Pour créer un cercle avec l' arc() : Set start angle à 0 et l' angle final à 2 * Math.PI. Les paramètres x et y définissent les coordonnées y du centre du cercle x et. Le paramètre r définit le rayon du cercle.
Exemple
Définir un cercle avec l' arc() méthode. Utilisez ensuite la stroke() méthode pour dessiner effectivement le cercle:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke(); Essayez - le vous - même »