Coordonnées du Canvas
Le canvas HTML est un élément puissant d'HTML5 qui vous permet de créer et de manipuler des graphiques sur une page web à l'aide de JavaScript. L'élément canvas fournit une surface de dessin bidimensionnelle, que l'on peut considérer comme une grille ou un système de coordonnées, dont le coin supérieur gauche a les coordonnées (0,0). L'axe X augmente horizontalement vers la droite, et l'axe Y augmente verticalement vers le bas. Chaque point du canvas est représenté par une paire de coordonnées (x, y) qui définit sa position au sein de la grille.
Tracer une ligne
Les méthodes ci-dessous sont utilisées pour tracer une ligne droite sur un canvas :
moveTo(x,y), qui spécifie le point de départ de la lignelineTo(x,y), qui spécifie le point d'arrivée de la ligne
Utilisez l'une des méthodes de « tracé » pour dessiner une ligne, par exemple stroke().
Exemple de l'élément HTML <canvas> pour tracer une ligne :
Exemple de l'élément HTML <canvas> pour tracer une ligne
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("canvasExample");
var ctx = c.getContext("2d");
// Starting point (0,0) is the top-left corner
ctx.moveTo(0, 0);
// Ending point (300,150) matches the canvas width and height
ctx.lineTo(300, 150);
ctx.strokeStyle = '#359900';
ctx.stroke();
</script>
</body>
</html>Dans l'exemple ci-dessus, nous avons défini les points de départ et d'arrivée de la ligne, et utilisé la méthode stroke() pour la tracer.
Tracer un cercle
Les méthodes ci-dessous sont utilisées pour tracer un cercle sur un canvas :
beginPath(), qui commence un tracéarc(x,y,r,startangle,endangle), qui crée un arc/courbe. Si vous souhaitez créer un cercle avecarc(): définissez l'angle de départ à 0 et l'angle de fin à 2 * Math.PI. Les paramètres x et y spécifient les coordonnées x et y du centre du cercle. Le paramètre r spécifie le rayon du cercle.
Exemple de l'élément HTML <canvas> pour tracer un cercle :
Exemple de l'élément HTML <canvas> pour tracer un cercle :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="250" height="200" style="border:1px solid #dddddd;">
The canvas tag is not supported by your browser.
</canvas>
<script>
var canvas = document.getElementById("exampleCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
// Center at (125, 95), radius 70. 125 is half of the 250 width.
ctx.arc(125, 95, 70, 0, 2 * Math.PI);
ctx.strokeStyle = '#1c87c9';
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>Dans l'exemple ci-dessus, nous avons défini un cercle avec la méthode arc() et utilisé la méthode stroke() pour le tracer.
Pratique
Quelles sont les caractéristiques des coordonnées de l'élément HTML5 <canvas> ?