Accueil

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

À propos de Canvas Les rectangles Effacement partiel d'une forme Les cercles, ellipses et arcs Les lignes et polygones Insérer du texte - ombrage Canevas "responsives" Courbes quadratiques et courbes de Bézier Le constructeur Path2D() - notation SVG des chemins Insertion d'images - filtres Dégradés (linéaire & radiaux) et motifs Transformations : translate(), scale(), rotate() Masques et compositions

Animations et jeux avec Canvas

Animations basiques Animation de courbes de Bézier et d'ellipses Animations avec effet 3D Trois superbes animations: diaporama, horloge & jeu Combiner Canvas & SVG

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

À propos de l'API Canvas

L'API Canvas ("toile" en français) faisant partie de la spécification HTML5, est implémentée par tous les navigateurs récents.
Il est donc possible de dessiner dans une page web sans chargement préalable d'une librairie JS.
L'API Canvas s'améliore constamment en s'enrichissant de nouvelles méthodes qui permettent de dessiner des formes complexes en quelques lignes de script.

Une belle animation Canvas

Ci-dessous une animation réalisée avec Canvas.

Pour aborder dans de bonnes conditions l'API Canvas vous devez maitriser en JavaScript : les variables, les conditions, les opérateurs, les itérations, les fonctions (nommées et anonymes).
Pour l'animation Canvas, les fonctions natives setInterval() & clearInterval() sont très utilisées.
Suivez éventuellement le lien pour vous initier d'abord à JavaScript : mon tuto JavaScript
Vous devez aussi connaitre la notation SVG des chemins (en absolu et en relatif) : la balise PATH de SVG - notation en absolu et en relatif d'un chemin

Intérêt de Canvas

Un dilemme cornélien

Dans ce site il y a un tuto complet sur le langage SVG : dessins vectoriels avec SVG

Principes de l'API Canvas

Dessiner dans la page avec Canvas c'est écrire un peu de HTML et de CSS pour définir une zone de dessin. Mais c'est surtout écrire un script sinon la zone de dessin reste vide ...
Attention une image produite par Canvas perd de la qualité lorsqu'elle est étirée puisqu'il s'agit d'une image matricielle. Mais vous verrez que le rendu peut être tout à fait correct à condition de prendre certaines précautions ...

La méthode getContext('2d') appliquée à un élément de type HTMLCanvasElement (une balise canvas) crée un objet de type 2D.
On peut ensuite appliquer à cet objet de type CanvasRenderingContext2D une multitude de méthodes pour dessiner rectangles,arcs de cercle et d'ellipse, polygones, etc.

Inconvénient de l'API Canvas

Pour que le dessin s'affiche il faut bien sûr que JavaScript soit activé par le navigateur ce qui n'est pas toujours le cas ...
Donc je vous conseille d'utiliser la balise NOSCRIPT pour avertir éventuellement le visiteur que le navigateur a bloqué l'exécution d'un script.

Attention les formes dessinées par le script dans la zone Canvas ne sont jamais des éléments du DOM (à la différence des objets SVG). Il est donc impossible de les identifier en vue de les manipuler via le CSS.

Une API en constante évolution

Canvas est une librairie qui s'enrichit régulièrement

L'API s'enrichit régulièrement de nouvelles méthodes qui simplifient le travail du développeur web.
Dans les chapitres qui suivent j'évoque les méthodes récentes ellipse(), filter() et le constructeur path2D().
Les animations sont désormais plus fluides avec la méthode window.requestAnimationFrame()

Donc mon opinion vis à vis de cette API évolue favorablement.
Il y a encore peu, je doutais de l'utilité de cet outil puisqu'il existait une solution alternative : le langage SVG. Mais compte tenu des améliorations constantes de cet outil, il est désormais possible de réaliser des beaux logos et des animations en quelques lignes de code.