JavaScript Academy · Leçon

Dessiner des formes et des tracés

Rendez des rectangles, des arcs et des tracés personnalisés.

Dessiner des formes et des tracés est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Les rectangles d’abord

Les rectangles disposent de raccourcis dédiés : fillRect, strokeRect et clearRect. Chacun accepte (x, y, width, height).

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

Commencer un tracé

Pour tout ce qui n’est pas un rectangle, vous devez construire un tracé. Appelez beginPath() pour repartir de zéro, ajoutez des segments, puis utilisez stroke() ou fill().

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();

moveTo et lineTo

moveTo(x, y) lève le crayon et le place sans dessiner. lineTo(x, y) trace une ligne droite entre le point actuel et le nouveau point.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

Fermer un tracé

closePath() trace une ligne jusqu’au point de départ et termine le contour. C’est utile pour les polygones.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

Remplir les formes

fill() peint l’intérieur du tracé actuel avec fillStyle. Vous pouvez remplir et tracer le même tracé.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

Dessiner des cercles avec arc

arc(x, y, radius, startAngle, endAngle) dessine un arc de cercle. Les angles sont exprimés en radians. Un cercle complet va de 0 à 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

Arcs partiels et secteurs

Utilisez un angle de départ et un angle d’arrivée pour dessiner un secteur. Combinez cela avec lineTo vers le centre pour obtenir une part de camembert.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

Courbes quadratiques et de Bezier

quadraticCurveTo(cpx, cpy, x, y) et bezierCurveTo(...) dessinent des courbes lisses à l’aide de points de contrôle.

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

Style des lignes

Contrôlez l’apparence des lignes avec lineWidth, lineCap (butt/round/square), lineJoin (miter/round/bevel) et setLineDash.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

Règles de remplissage

fill() accepte "nonzero" (par défaut) ou "evenodd" pour déterminer comment remplir les sous-tracés qui se chevauchent — pratique pour les formes avec des trous.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

Dégradés comme remplissages

Créez un dégradé avec createLinearGradient, ajoutez des points de couleur, puis affectez-le à fillStyle.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

Vérification rapide

Vérifiez vos connaissances sur les tracés.

Récapitulatif : formes et tracés

Vous savez maintenant dessiner des rectangles, construire des tracés avec beginPath/moveTo/lineTo/closePath, afficher des cercles avec arc, ajouter des courbes, styliser les lignes et remplir avec des couleurs ou des dégradés. Ensuite : les images et le texte.

Questions Fréquemment Posées

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

Oui — le texte complet de « Dessiner des formes 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

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

Rendez des rectangles, des arcs et des tracés personnalisés. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 formes 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 JavaScript Academy ?

Oui. Chaque leçon JavaScript 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 à JavaScript Academy