Disegnare rettangoli e tracciati
Usare fillRect, strokeRect e i comandi per i tracciati per disegnare forme
Disegnare rettangoli e tracciati è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Configurazione di Canvas
L'elemento <canvas> richiede attributi espliciti width e height per definire le dimensioni in pixel. Ottenga il contesto 2D: const ctx = canvas.getContext("2d"). Tutte le operazioni di disegno utilizzano questo oggetto contesto.
<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");fillRect e strokeRect
Disegni rettangoli senza creare tracciati: ctx.fillRect(x, y, width, height) riempie un rettangolo pieno. ctx.strokeRect(x, y, width, height) ne disegna il contorno. Imposti ctx.fillStyle e ctx.strokeStyle prima di disegnare.
ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);clearRect per cancellare
ctx.clearRect(x, y, width, height) rende trasparenti i pixel. Lo utilizzi per cancellare aree prima di ridisegnarle — è essenziale per le animazioni: cancelli il canvas, quindi ridisegni tutto nelle nuove posizioni a ogni fotogramma.
Nozioni di base sui tracciati
I tracciati definiscono le forme. Inizi: ctx.beginPath(). Si sposti al punto iniziale: ctx.moveTo(x, y). Disegni le linee: ctx.lineTo(x, y). Chiuda: ctx.closePath(). Esegua il rendering: ctx.fill() o ctx.stroke().
Disegnare linee
Un triangolo: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). closePath disegna automaticamente il segmento finale fino al punto iniziale: non è necessario ripetere la prima coordinata.
Arco e cerchio
ctx.arc(cx, cy, radius, startAngle, endAngle). Un cerchio completo: ctx.arc(100, 100, 50, 0, Math.PI * 2). Gli angoli sono espressi in radianti. 0 corrisponde a destra, alla posizione delle ore 3; Math.PI a sinistra, alla posizione delle ore 9.
Curve di Bézier
ctx.quadraticCurveTo(cpx, cpy, x, y) disegna una curva di Bézier quadratica con un punto di controllo. ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) disegna una curva di Bézier cubica con due punti di controllo per ottenere curve morbide.
Stili di riempimento
fillStyle accetta stringhe di colore, gradienti lineari (ctx.createLinearGradient()), gradienti radiali (ctx.createRadialGradient()) e pattern (ctx.createPattern(image, repeat)). Applichi riempimenti complessi oltre ai colori uniformi per ottenere effetti visivi ricchi.
Stili delle linee
Controlli l'aspetto delle linee: ctx.lineWidth (larghezza in pixel), ctx.lineCap ("butt", "round", "square"), ctx.lineJoin ("miter", "round", "bevel") e ctx.setLineDash([5, 3]) per linee tratteggiate con segmenti di lunghezza alternata.
Salvare e ripristinare
ctx.save() inserisce lo stato corrente (fillStyle, strokeStyle, lineWidth, transform, clip) in uno stack. ctx.restore() lo rimuove. Racchiuda le operazioni di disegno complesse tra save e restore per evitare che gli stili si propaghino tra operazioni di disegno non correlate.
Sistema di coordinate
L'origine del canvas (0,0) si trova nell'angolo superiore sinistro. X aumenta verso destra; Y aumenta verso il basso. Le trasformazioni (translate, rotate, scale) modificano il sistema di coordinate e consentono di disegnare rispetto a un'origine locale senza calcolare manualmente le posizioni assolute.
Verifica delle conoscenze
Che cosa fa ctx.beginPath() prima di disegnare un tracciato?
Riepilogo
Il disegno 2D su Canvas utilizza i metodi del contesto per i rettangoli (fillRect, strokeRect), i tracciati (beginPath, moveTo, lineTo, arc, bezierCurveTo), gli stili (fillStyle, strokeStyle, lineWidth) e la gestione dello stato (save/restore). La padronanza di queste primitive consente di creare elementi grafici complessi a partire da semplici blocchi costitutivi.
Domande Frequenti
La lezione «Disegnare rettangoli e tracciati» è gratuita?
Sì — il testo completo di «Disegnare rettangoli e tracciati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Disegnare rettangoli e tracciati»?
Usare fillRect, strokeRect e i comandi per i tracciati per disegnare forme Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Disegnare rettangoli e tracciati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurare canvas e il contesto 2D
- Disegnare rettangoli e tracciati
- Testo e immagini su canvas
- Animazioni con requestAnimationFrame