A la découverte de <canvas>
Attention: cet article date du 12 décembre 2015
Ce qu'il contient est peut être encore valable...
... ou complètement obsolète!
Canvas est la balise qui permet, à l’aide de JavaScript, de programmer des dessins, des animations.
Petit tour: mise en place, rectangles, chemins, courbes de Bézier, arc de cercles, textes, images, transformations…
Au programme de ce tutoriel vidéo d’une heure environ:
- principes du dessin programmatique (via le code, JavaScript en occurrence)
- mise en place de la balise, de quelques écouteurs d’évènements, et des 2 variables importantes
- dessiner: rectangles contours et pleins, lignes, chemins, courbes de Bézier, cercles et arcs de cercles…
- manipuler des textes et des images
- opérer des transformations (échelle, translation, rotation, matrice…)
Cette vidéo contient du code (JavaScript) il vaut mieux avoir quelques notions pour en apprécier la pleine saveur.
Attention, cette vidéo contient des mots sales : mathématique, radian et degré, tangente, matrice… en avoir quelques notions peut être un plus.
Cette vidéo contient aussi des assortiments de couleurs qui peuvent piquer un peu les yeux. Mais au moins, elle ne contient pas de police Comic Sans…
Ooh, et moi qui adore le Comic Sans MS!
Bref, je trouve qu’on « s’amuse » plus à utiliser des balises de création plutôt que les « drag and drop » sur les interfaces orientées objets. Mais des fois on « triche » un peu pour accélérer le travail.
En tout cas, le tuto est très clair et détaillé pas à pas.