Mettre de la couleur dans sa vie

Comment acceder au canvas ?

Pour acceder au canvas avec JS, il suffit de récuperer l'objet du DOM.

DOM signifie Document Object Model. Il s'agit de la représentation structurée des données pour les langages de balisages tels que HTML, XML et SVG.

On stocke donc le canvas sous forme de variable grâce à la ligne suivante :

var screen = document.getElementById("screen");

Il faut ensuite créer un contexte de rendu, c'est-à-dire, un objet qui sera capable de changer la couleur des pixels de notre canvas.

var context = screen.getContext("2d"); // On crée un contexte 2d

On pourrait dès maintenant dessiner à l'écran. Par exemple avec le code suivant :

// On choisit de remplir en noir context.fillStyle = "#000"; // On remplit un rectangle de (x,y) = (0,0) avec long = larg = 400 context.fillRect(0, 0, 400, 400);

Ce code remplit l'écran de noir.

Cependant, pour pouvoir coder notre tortue, nous n'allons pas avoir besoin de remplir des rectangles, mais d'utiliser un outil incroyable : les chemins.

Les chemins, la voie de la tortue

Les chemins peuvent être vus comme une suite d'instructions simples permettant de dessiner une forme. Par exemple, un polygône est un chemin constitué de plusieurs points reliés par des lignes droites.

Les chemins sont des objets en JavaScript, cela veut dire qu'ils comportent des variables et des fonctions (appelées méthodes). Mais surtout qu'ils sont stockés dans la RAM.

Si vous voulez une liste des méthodes des objets Path2D, vous pourrez la trouver ici.

Notre code pour l'instant

var screen = document.getElementById("screen"); var context = screen.getContext("2d");

Passer à la suite du tutoriel