Une fois la hauteur, la largeur et l’attribut "id" sont définies et tester si notre canvas et notre context sont existes :
Un tracé est initialisé par la méthode
On ajoutant le code :
Les coordonnées des points utilisés:
Pour définir les styles, des couleurs de contour et de remplissage dont dépendent
Ajoutant ce code à notre exemple:
En résume :
<!doctype html>
<html>
<head>
<title>Test Canvas</title>
</head>
<script>
window.onload = function()
{
var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");
if(!canvas)
{
alert("Impossible de récupérer le canvas");
return;
}
if(!context)
{
alert("Impossible de récupérer le context");
return;
}
// Suite...
}
</script>
<body>
<canvas id="mon_canvas" width="300" height="300">
</canvas>
</body>
</html>
Les premières fonctions pour commencer sont celles qui vont tracer des chemins. Un tracé peut se dérouler en plusieurs étapes: initialisation de chemin, définir leur point de départ puis point d'arrivée, affichage du contour ou du remplissage.Un tracé est initialisé par la méthode
beginPath(). Le point de référence de début du tracé est désigné avec moveTo(x,y). Il s'agit de décider à partir de quel emplacement le tracé va être déplacé. Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath(). On peut ajouter autant de segments que l'on veut, puis éventuellement "fermer" la forme pour revenir automatiquement au point de départ avec closePath().context.beginPath(); // Début du chemin context.moveTo(100,100); // Le tracé part du point 100,100 context.lineTo(200,100); // Un segment est ajouté vers 200,100 context.lineTo(100,200); // Un segment est ajouté vers 100,200 context.closePath(); // Fermeture du cheminCe code ne charge rien à l'affichage. Mais, il apparait une fois appelée l'une des deux méthodes
fill() pour remplir et stroke() pour le contour.
On ajoutant le code :
context.stroke();Il s'affiche:
Pour définir les styles, des couleurs de contour et de remplissage dont dépendent
fill() et stroke() , il faut utiliser des propriétés du contexte: fillStyle et strokeStyle.Ajoutant ce code à notre exemple:
context.fillStyle = "red"; context.fill();Il s'affiche:
| Méthode | Desc |
|---|---|
beginPath() |
Indique au context que l'on s'apprête à effectuer un nouveau tracé. |
moveTo(x,y) |
Par défaut, si l'on trace une ligne, elle commencera aux coord[0, 0]. Cette fonction déplace le point de départ de chaque ligne. |
lineTo(x,y) |
Pemet de tracer une ligne en partant de la position actuelle, jusqu'aux coordonnées x,y indiquées. |
closePath() |
Indique au context que l'on a terminé avec ce tracé. |
fill() |
Créer une forme pleine à partir des lignes tracées. |
strocke() |
Créer les traits des lignes. |
0 commentaires: