HTML Academy · Leçon

Dessiner des rectangles et des tracés

Utilisez `fillRect`, `strokeRect` et les commandes de tracé pour dessiner des formes.

Dessiner des rectangles et des tracés est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Configuration du canevas

L’élément <canvas> nécessite des attributs explicites de largeur et de hauteur pour définir ses dimensions en pixels. Obtenez le contexte 2D : const ctx = canvas.getContext("2d"). Toutes les opérations de dessin utilisent cet objet de contexte.

<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");

fillRect et strokeRect

Dessinez des rectangles sans chemins : ctx.fillRect(x, y, width, height) remplit un rectangle uni. ctx.strokeRect(x, y, width, height) en dessine le contour. Définissez ctx.fillStyle et ctx.strokeStyle avant de dessiner.

ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);

Effacement avec clearRect

ctx.clearRect(x, y, width, height) rend les pixels transparents. Utilisez-le pour effacer des zones avant de les redessiner — c’est indispensable pour l’animation : effacez le canevas, puis redessinez tout aux nouvelles positions à chaque image.

Notions de base sur les chemins

Les chemins définissent des formes. Commencez avec ctx.beginPath(). Déplacez-vous au point de départ avec ctx.moveTo(x, y). Tracez des lignes avec ctx.lineTo(x, y). Fermez avec ctx.closePath(). Effectuez le rendu avec ctx.fill() ou ctx.stroke().

Tracer des lignes

Un triangle : ctx.beginPath() → ctx.moveTo(100,50) → ctx.lineTo(200,200) → ctx.lineTo(0,200) → ctx.closePath() → ctx.stroke(). ctx.closePath() dessine automatiquement le dernier segment jusqu’au point de départ — inutile de répéter la première coordonnée.

Arcs et cercles

ctx.arc(cx, cy, radius, startAngle, endAngle). Pour un cercle complet : ctx.arc(100, 100, 50, 0, Math.PI * 2). Les angles sont exprimés en radians. 0 correspond à la droite (position de 3 heures) ; Math.PI correspond à la gauche (position de 9 heures).

Courbes de Bézier

ctx.quadraticCurveTo(cpx, cpy, x, y) trace une courbe de Bézier quadratique avec un point de contrôle. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) trace une courbe de Bézier cubique avec deux points de contrôle pour obtenir des courbes lisses.

Styles de remplissage

fillStyle accepte des chaînes de couleur, des dégradés linéaires (ctx.createLinearGradient()), des dégradés radiaux (ctx.createRadialGradient()) et des motifs (ctx.createPattern(image, repeat)). Appliquez des remplissages complexes au-delà des couleurs unies pour créer des effets visuels riches.

Styles de ligne

Contrôlez l’apparence des lignes : ctx.lineWidth (largeur en pixels), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") et ctx.setLineDash([5, 3]) pour créer des lignes en pointillés aux longueurs alternées.

Enregistrer et restaurer

ctx.save() empile l’état actuel (fillStyle, strokeStyle, lineWidth, transformation, découpage) dans une pile. ctx.restore() le retire de la pile. Encadrez les opérations de dessin complexes avec save/restore pour éviter qu’un style ne se répercute sur des opérations de dessin sans rapport.

Système de coordonnées

L’origine du canevas (0,0) se trouve dans l’angle supérieur gauche. X augmente vers la droite ; Y augmente vers le bas. Les transformations (translation, rotation, mise à l’échelle) modifient le système de coordonnées et permettent de dessiner par rapport à une origine locale sans calculer manuellement les positions absolues.

Vérification des connaissances

Que fait ctx.beginPath() avant le tracé d’un chemin ?

Résumé

Le dessin 2D sur canevas utilise des méthodes de contexte pour les rectangles (fillRect, strokeRect), les chemins (beginPath, moveTo, lineTo, arc, bezierCurveTo), le style (fillStyle, strokeStyle, lineWidth) et la gestion de l’état (sauvegarde/restauration). La maîtrise de ces primitives permet de construire des graphiques complexes à partir de composants simples.

Questions Fréquemment Posées

La leçon « Dessiner des rectangles et des tracés » est-elle gratuite ?

Oui — le texte complet de « Dessiner des rectangles et des tracés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Dessiner des rectangles et des tracés » ?

Utilisez `fillRect`, `strokeRect` et les commandes de tracé pour dessiner des formes. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Dessiner des rectangles et des tracés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML Academy