HTML - Canvas: Guide de débutant pour les graphiques web

Bonjour à tous, futurs mage du web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du HTML Canvas. Ne vous inquiétez pas si vous n'avez jamais écrit une ligne de code auparavant - je serai votre guide amical, et nous explorerons ce sujet pas à pas. Alors, prenez votre pinceau virtuel, et mettons-nous à créer des œuvres d'art numériques !

Qu'est-ce que le HTML Canvas ?

Avant de plonger dedans, comprenons ce qu'est le HTML Canvas. Imaginez que vous avez une feuille blanche où vous pouvez dessiner ce que vous voulez - c'est essentiellement ce qu'est le Canvas, mais dans le domaine numérique. C'est un élément HTML qui nous permet de dessiner des graphiques, de créer des animations, et même de développer des jeux en utilisant JavaScript.

Exemple

Commençons par un exemple simple pour nous familiariser :

<canvas id="myCanvas" width="200" height="100"></canvas>

Ce code crée un élément canvas sur votre page web. C'est comme installer un chevalet avec une toile blanche, prêt pour votre touche artistique !

Le Contexte de Rendu

Maintenant que nous avons notre canvas, nous avons besoin d'un moyen de dessiner dessus. C'est là que rentre en jeu le contexte de rendu. Pensez-y comme à votre ensemble d'outils de peinture. Nous utiliserons JavaScript pour obtenir ce contexte :

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Ici, nous récupérons notre canvas et demandons un ensemble d'outils de dessin 2D. C'est comme拾起你的铅笔和调色板！

Support des Navigateurs

Avant d'aller plus loin, une petite note sur le support des navigateurs. La plupart des navigateurs modernes supportent le Canvas, mais il est toujours bon de vérifier. Voici un moyen pratique de détecter le support :

if (canvas.getContext) {
// Canvas est supporté
} else {
// Canvas n'est pas supporté
}

Ce code est comme demander au navigateur : "Hey, peux-tu gérer cette chose cool en canvas ?" Si la réponse est oui, on est partis !

HTML Canvas - Dessiner des Rectangles

Commençons par quelque chose de simple - dessiner des rectangles. Canvas a trois méthodes pour cela :

Méthode	Description
fillRect(x, y, width, height)	Dessine un rectangle rempli
strokeRect(x, y, width, height)	Dessine un contour de rectangle
clearRect(x, y, width, height)	Efface la zone rectangulaire spécifiée

Voici un exemple :

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 10, 50, 50);

ctx.clearRect(30, 30, 30, 30);

Ce code dessine un carré rouge rempli, un carré bleu en contour, puis efface une partie du carré rouge. C'est comme dessiner avec des crayons et puis utiliser une gomme !

HTML Canvas - Dessiner des Chemins

Maintenant, soyons un peu plus créatifs avec les chemins. Les chemins sont comme des puzzles de relier les points. Voici comment on fait :

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath();
ctx.stroke();

Cela crée un triangle. On commence à (50, 50), on trace une ligne jusqu'à (200, 50), puis jusqu'à (200, 200), et enfin on ferme le chemin. C'est comme jouer à "ne pas lever ton stylo" !

HTML Canvas - Dessiner des Lignes

Dessiner des lignes est similaire aux chemins, mais plus simple. Voici un exemple :

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Cela dessine une ligne diagonale depuis le coin supérieur gauche jusqu'au milieu droit de notre canvas. C'est comme jouer à relier les points avec seulement deux points !

HTML Canvas - Dessiner des Courbes de Bézier

Ajoutons maintenant quelques courbes à notre répertoire. Les courbes de Bézier sont comme l'écriture cursive élégante du monde du dessin :

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
ctx.stroke();

Cela crée une courbe qui commence à (20, 20), utilise (20, 100) et (200, 100) comme points de contrôle, et se termine à (200, 20). C'est comme dessiner un sourire !

HTML Canvas - Dessiner des Courbes Quadratiques

Les courbes quadratiques sont comme la cousine plus simple des Bézier :

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 100, 180, 20);
ctx.stroke();

Cela crée une courbe de (20, 20) à (180, 20), avec (100, 100) comme point de contrôle. C'est parfait pour dessiner des arcs !

HTML Canvas - Utiliser des Images

Le Canvas n'est pas seulement pour le dessin - nous pouvons aussi travailler avec des images :

var img = new Image();
img.onload = function() {
ctx.drawImage(img, 10, 10);
};
img.src = 'myImage.png';

Cela charge une image et la dessine sur notre canvas. C'est comme coller une étiquette dans ton scrapbook numérique !

HTML Canvas - Créer des Dégradés

Ajoutons un peu de flair coloré avec des dégradés :

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);

Cela crée un dégradé de rouge à bleu et l'utilise pour remplir un rectangle. C'est comme créer un coucher de soleil numérique !

HTML Canvas - Styles et Couleurs

Canvas offre divers moyens de styliser nos dessins :

ctx.fillStyle = "yellow";
ctx.strokeStyle = "black";
ctx.lineWidth = 5;

ctx.fillRect(25, 25, 100, 100);
ctx.strokeRect(25, 25, 100, 100);

Cela crée un carré jaune avec un bord épais noir. C'est comme colorier à l'intérieur des lignes, mais on choisit aussi les lignes !

HTML Canvas - Texte et Polices

Nous pouvons aussi ajouter du texte à notre canvas :

ctx.font = "30px Arial";
ctx.fillText("Bonjour, Canvas !", 10, 50);

Cela écrit "Bonjour, Canvas !" en police Arial 30px. C'est comme ajouter des légendes à ton œuvre d'art numérique !

HTML Canvas - Motifs et Ombres

Ajoutons un peu de profondeur avec des motifs et des ombres :

var img = new Image();
img.src = 'pattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 200, 200);
};

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 100, 100);

Cela crée un arrière-plan en motif et un carré bleu avec une ombre. C'est comme ajouter de la texture et de la profondeur à ton tableau numérique !

HTML Canvas - Sauvegarder et Restaurer les États

Canvas nous permet de sauvegarder et de restaurer des états de dessin :

ctx.fillStyle = "blue";
ctx.save();

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

ctx.restore();
ctx.fillRect(70, 10, 50, 50);

Cela dessine un carré rouge, puis un bleu. C'est comme avoir plusieurs couches dans ton œuvre d'art numérique !

HTML Canvas - Translation

Nous pouvons déplacer notre origine de dessin :

ctx.translate(100, 50);
ctx.fillRect(0, 0, 50, 50);

Cela déplace notre point de dessin et dessine un carré. C'est comme glisser ton papier avant de commencer à dessiner !

HTML Canvas - Rotation

Ajoutons un peu de rotation à nos dessins :

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, -25, 100, 50);

Cela tourne notre canvas et dessine un rectangle. C'est comme tourner ton papier à un angle avant de dessiner !

HTML Canvas - Mise à l'Échelle

Nous pouvons aussi changer l'échelle de nos dessins :

ctx.scale(2, 2);
ctx.fillRect(25, 25, 50, 50);

Cela double la taille de tout ce que nous dessinons. C'est comme utiliser une loupe sur ton œuvre d'art !

HTML Canvas - Transforms

Les transformations permettent des manipulations plus complexes :

ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillRect(0, 0, 50, 50);

Cela applique une transformation complexe avant de dessiner. C'est comme plier la réalité dans ton monde numérique !

HTML Canvas - Composition

Nous pouvons contrôler comment les nouveaux dessins interagissent avec les existants :

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

Cela dessine un carré bleu, puis un rouge par-dessus. C'est comme superposer différentes couleurs de peinture !

HTML Canvas - Animations

Enfin, apportons de la vie à notre canvas avec une animation :

var x = 0;

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 0, 50, 50);
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate);
}

animate();

Cela crée un carré qui se déplace à travers l'écran. C'est comme créer ton propre petit film !

Et voilà - un tourbillon d'informations sur le HTML Canvas ! Souvenez-vous, la clé pour maîtriser le Canvas, c'est la pratique. Alors, expérimentez, jouez, et surtout, amusez-vous ! Qui sait, vous pourriez bien créer la prochaine œuvre d'art numérique. Bon codage, futurs Picassos du web !

Credits: Image by storyset