JavaScript - Canvas: Guide pour les débutants en dessin numérique

Salut là, futur programmeur ! Je suis ravi de vous guider dans cette aventure passionnante vers le monde de JavaScript et du Canvas. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, je peux vous dire que le Canvas est l'un des sujets les plus amusants et gratifiants à apprendre. C'est comme avoir un terrain de jeu numérique directement dans votre navigateur !

Qu'est-ce que le Canvas ?

Avant de plonger dans le code, comprenons ce qu'est le Canvas. Imaginez que vous avez une feuille blanche et un ensemble de stylos colorés. Voilà essentiellement ce qu'est le Canvas dans le monde numérique - une zone vierge sur votre page web où vous pouvez dessiner ce que vous voulez en utilisant JavaScript !

Le Canvas a été introduit avec HTML5 et est depuis devenu un outil puissant pour créer des graphiques, des animations et même des jeux directement dans les navigateurs web. C'est comme avoir un mini studio d'art directement dans votre éditeur de code !

Utiliser le Canvas avec JavaScript

Maintenant, mettons nos manches à la pâte et commencer à dessiner ! Premièrement, nous devons configurer notre Canvas en HTML.

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

Cela crée un élément canvas de 400 pixels de large et 200 pixels de haut. Pensez-y comme votre tableau de dessin numérique.

Commencer avec le Canvas

Pour commencer à dessiner sur notre canvas, nous devons obtenir une référence à celui-ci dans notre code JavaScript et obtenir son contexte de dessin.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

La méthode getContext('2d') nous donne un contexte de rendu 2D - l'outil que nous utiliserons pour dessiner sur notre canvas.

Dessiner des formes

Commençons par quelque chose de simple - dessiner un rectangle !

ctx.fillStyle = 'bleu';
ctx.fillRect(50, 50, 100, 75);

Ce code dessine un rectangle bleu démarquant aux coordonnées (50, 50) avec une largeur de 100 pixels et une hauteur de 75 pixels. C'est comme dire à votre stylo numérique, "Eh, dessine un rectangle ici, et fais-le de cette taille !"

Dessiner des lignes

Maintenant, essayons de dessiner une ligne :

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

Ce code commence un nouveau chemin, déplace le "stylo" à (50, 50), puis dessine une ligne vers (200, 100), et enfin trace le chemin pour le rendre visible. C'est comme jouer à connecter les points, mais avec du code !

Dessiner des cercles

Que diriez-vous de dessiner un visage souriant ? Commençons par dessiner un cercle pour le visage :

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'jaune';
ctx.fill();
ctx.stroke();

Cela dessine un cercle jaune avec un contour noir. La méthode arc peut sembler effrayante, mais pensez-y comme dire à votre stylo, "Dessine un cercle centré à (200, 100), avec un rayon de 50, en partant de 0 et en allant tout autour (c'est ce que signifie Math.PI * 2)."

Ajouter du texte

Ajoutons un peu de texte à notre canvas :

ctx.font = '20px Arial';
ctx.fillStyle = 'noir';
ctx.fillText('Bonjour, Canvas !', 10, 30);

Cela définit la police à 20 pixels Arial, met la couleur en noir, et écrit "Bonjour, Canvas !" en partant de la position (10, 30).

Exemples

Maintenant que nous avons couvert les bases, regardons quelques exemples amusants pour voir ce que le Canvas peut vraiment faire !

Exemple 1 : Dessiner une maison

// Configurer le canvas
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Dessiner le corps de la maison
ctx.fillStyle = 'brun';
ctx.fillRect(100, 100, 150, 100);

// Dessiner le toit
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fillStyle = 'rouge';
ctx.fill();

// Dessiner la porte
ctx.fillStyle = 'bleu';
ctx.fillRect(150, 150, 50, 50);

// Dessiner la fenêtre
ctx.fillStyle = 'jaune';
ctx.fillRect(200, 120, 30, 30);

Ce code dessine une maison simple avec un corps brun, un toit rouge, une porte bleue et une fenêtre jaune. C'est comme construire une maison avec des blocs de code au lieu de Lego !

Exemple 2 : Cercle animé

Faisons bouger les choses ! Voici une simple animation d'un cercle rebondissant :

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
let dx = 2;
let dy = 2;
const radius = 20;

function drawCircle() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'vert';
ctx.fill();

if (x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if (y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}

x += dx;
y += dy;

requestAnimationFrame(drawCircle);
}

drawCircle();

Ce code crée un cercle vert qui rebondit autour du canvas. C'est comme créer votre propre petit jeu de Pong !

Tableau des méthodes Canvas

Voici un tableau pratique des méthodes Canvas couramment utilisées que nous avons utilisées et de quelques autres :

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
beginPath()	Commence un nouveau chemin
moveTo(x, y)	Déplace le chemin au point spécifié
lineTo(x, y)	Dessine une ligne jusqu'au point spécifié
arc(x, y, radius, startAngle, endAngle)	Dessine un arc ou un cercle
fill()	Remplit le chemin actuel
stroke()	Trace le chemin actuel
fillText(text, x, y)	Dessine du texte rempli sur le canvas
strokeText(text, x, y)	Dessine des contours de texte

Souvenez-vous, apprendre à coder est comme apprendre une nouvelle langue. Ça prend du temps et de la pratique, mais avant de savoir, vous serez créer des choses incroyables avec Canvas ! Continuez à expérimenter, essayez de combiner différentes formes et méthodes, et, surtout, amusez-vous bien. Qui sait ? Le prochain grand jeu web pourrait être créé par vous en utilisant Canvas !

Credits: Image by storyset