◎ Formation complète HTML5 Canvas ◎
Ce cours HTML5 Canvas met en place l'environnement, explique ce qu'est l'API Canvas, puis dessine pas à pas : lignes et jointures, finitions, ombres, courbes quadratiques et de Bézier, cœur, rectangles, échiquier, cercles, Pacman et textes stylisés.
➲ Compléments
⁂ HTML5 CANVAS - 0 Préparer son environnement pour HTML5 Canvas➔ Vérifiez que votre navigateur gère HTML5 et JavaScript, installez un éditeur de code et découvrez les prérequis avant de dessiner avec Canvas.
⁂ HTML5 CANVAS - 0.1 Qu'est-ce que HTML5 et l'API Canvas ?➔ HTML5 et l'API Canvas expliqués simplement : une version du langage web lancée en 2014, et une toile où dessiner avec JavaScript, sans plugin.
⁂ HTML5 CANVAS - Récapitulatif des attributs du canevas HTML5 (hors-série)➔ Récapitulez les attributs du canevas HTML5 : trait, épaisseur, couleur, jointures, ombres et chemins. Un hors-série pour bien retenir ce qu'on a vu.
➲ Section 1 :
⁂ HTML5 CANVAS - 1.3 Ajouter de la finition aux extrémités des lignes➔ Changez la forme des extrémités de vos lignes sur Canvas avec la propriété lineCap, en choisissant butt, round ou square, et voyez le résultat.
⁂ HTML5 CANVAS - 1.5 Ajouter des ombres aux figures➔ Ajoutez des ombres à vos figures sur Canvas avec shadowColor, shadowOffsetX, shadowOffsetY et shadowBlur, puis observez leur effet sur chaque figure dessinée.
⁂ HTML5 CANVAS - 1.6 Dessiner une courbe quadratique➔ Dessinez une courbe quadratique sur Canvas avec quadraticCurveTo : un point de contrôle, un point d'arrivée, puis un trait rouge affiché avec stroke.
⁂ HTML5 CANVAS - 1.8 Dessiner une courbe de Bézier➔ Tracez une courbe de Bézier sur Canvas avec bezierCurveTo, qui utilise deux points de contrôle et un point d'arrivée, et comparez-la à la courbe quadratique.
⁂ HTML5 CANVAS - 1.9 Dessiner un cœur avec des courbes➔ Dessinez un cœur rouge sur Canvas en combinant des courbes de Bézier et une courbe quadratique, après un rappel de arc et des deux types de courbes.
⁂ HTML5 CANVAS - 1 Créer son premier canvas en HTML5➔ Préparez votre éditeur et créez votre première toile HTML5 : une page HTML, une feuille de style CSS et l'extension Live Server pour l'afficher.
⁂ HTML5 CANVAS - 1.4 Jointures de lignes sur un canvas HTML5 avec lineJoin➔ Apprenez à modifier la jointure des lignes d'un canvas HTML5 avec la propriété lineJoin : pointe par défaut, biseau ou arrondie, et leur effet sur les figures.
⁂ HTML5 CANVAS - 1.7 Dessiner une courbe avec la méthode arc➔ Apprenez à dessiner une courbe sur le canevas HTML5 avec la méthode arc : centre, rayon, angles en radians et sens du tracé, expliqués pas à pas.
➲ Section 2 :
⁂ HTML5 CANVAS - 2.1 Dessiner un échiquier avec des rectangles➔ Dessinez un échiquier sur Canvas avec des rectangles et une boucle qui alterne les cases claires et foncées, avec un contour noir autour du plateau.
⁂ HTML5 CANVAS - 2.0 Dessiner, remplir et effacer des rectangles➔ Découvrez les quatre méthodes pour les rectangles sur le canevas HTML5 : tracer, remplir, contourner et effacer une zone, avec des exemples simples.
➲ Section 3 :
⁂ HTML5 CANVAS - 3.1 Dessiner Pac-Man avec des cercles➔ Dessinez Pac-Man sur Canvas avec deux arcs : un corps orange avec une bouche ouverte, et un œil noir, en réglant les angles en radians pour ouvrir la bouche.
⁂ HTML5 CANVAS - 3.0 Dessiner un cercle avec arc➔ Dessinez un cercle orange sur Canvas avec la méthode arc : centre, rayon, angles en radians, couleur de remplissage et couleur de contour du cercle.
➲ Section 4 :
⁂ HTML5 CANVAS - 4.1 Styliser les textes du canvas➔ Apprenez à régler le style, la taille et la famille de police des textes dessinés sur un canvas HTML5, puis vérifiez le rendu dans la page affichée.
⁂ HTML5 CANVAS - 4.0 Écrire du texte sur le canevas avec fillText➔ Apprenez à écrire du texte sur un canevas HTML5 : définir la police, placer le texte avec ses coordonnées et utiliser fillText et strokeText.
👍 Bon à savoir
Canvas dessine des pixels via JavaScript (contexte 2d), à la différence du SVG qui décrit des formes vectorielles. Il sert aux graphiques, jeux et visualisations ; les bibliothèques comme Chart.js reposent dessus.