Médiaforma

All posts tagged canvas

Cette rubrique s’appuie sur la précédente. Elle va vous montrer comment tracer des rectangles dans un canevas.

Voici le code utilisé :

Le canevas mis en place est le même que dans la rubrique précédente. Pour y afficher un rectangle, nous avons inséré un bouton à l’aide d’un formulaire. Ce bouton exécute la fonction JavaScript rectangle() lorsqu’il est pressé.

Examinons cette fonction.

Les deux premières instructions de la fonction rectangle() vous sont familières. Elles récupèrent le contexte du canevas. Pour afficher un rectangle plein, on commence par définir sa couleur de remplissage en initialisant la propriété fillStyle du contexte. Ensuite, il suffit d’exécuter la fonction fillRect() à laquelle on transmet les coordonnées de l’angle supérieur gauche du rectangle, ainsi que la largeur et la hauteur du rectangle. Ici, le rectangle sera affiché à 10 pixels du bord gauche et à 40 pixels du bord supérieur du canevas. Il aura une largeur de 130 pixels et une hauteur de 60 pixels.

Voici le résultat :


La balise <canvas> est une des grandes nouveautés du langage HTML 5. Par son intermédiaire, et grâce à quelques instructions JavaScript, vous pourrez dessiner des formes simples ou complexes en 2D ou en 3D.

Pour définir une balise <canvas>, il n’y a rien de plus simple. Ici par exemple, l’identifiant monCanvas est affecté à la balise <canvas> et ses dimensions sont fixées à 300 pixels sur 300. Remarquez le texte entre les balises <canvas> et </canvas>. Il s’affichera si le navigateur utilisé n’est pas compatible avec la balise <canvas>. La propriété CSS background-color fixe la couleur d’arrière-plan.

Voici à quoi ressemble ce code lorsqu’il est interprété dans Internet Explorer 9 :

Pour pouvoir travailler avec la balise <canvas>, il va falloir utiliser quelques lignes de JavaScript. Le but de ces instructions : récupérer le “contexte” du canevas afin de pouvoir lui adresser des instructions. Voici le code utilisé :

Le contexte du canevas est récupéré par la fonction JavaScript initialisation(). Dans un premier temps, on définit la variable el et on lui affecte l’élément canvas mis en place dans le code HTML5. Cette affectation se fait via la fonction getElementById() à laquelle on transmet l’identifiant de l’élément : monCanvas.

La deuxième instruction récupère le contexte 2D du canvas et le stocke dans la variable ctxt. C’est par l’intermédiaire de cette variable que nous allons pouvoir dessiner dans le canevas. La prochaine vidéo vous montrera comment procéder.