Médiaforma

Les bases de HTML5 Canvas

Print Friendly

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.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply