JavaScript Academy · Lezione

Configurare il contesto Canvas

Ottenga e configuri il contesto di rendering 2D.

Configurare il contesto Canvas è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è la Canvas API

La Canvas API consente di disegnare grafica 2D con JavaScript su un elemento <canvas>. Offre una superficie di disegno composta da pixel e una serie di comandi per dipingere forme, immagini e testo.

Il markup consiste in un unico tag <canvas>.
Tutto il disegno avviene in JavaScript tramite un oggetto context.

<canvas id="board" width="320" height="200"></canvas>

Ottenere il context

Chiami getContext('2d') sull'elemento canvas per ottenere un CanvasRenderingContext2D. Ogni comando di disegno passa attraverso questo oggetto.

const canvas = document.getElementById("board");
const ctx = canvas.getContext("2d");
console.log(ctx.constructor.name); // CanvasRenderingContext2D

Il sistema di coordinate

L'origine (0, 0) si trova nell'angolo in alto a sinistra. X cresce verso destra, Y cresce verso il basso. Un canvas di 320x200 ha l'angolo in basso a destra in (320, 200).

Attributi width e height

Gli attributi HTML width e height impostano la dimensione in pixel del buffer di disegno. Se omessi, hanno come valore predefinito 300x150. Impostarli in JavaScript cancella anche il canvas.

const canvas = document.getElementById("board");
canvas.width = 400;
canvas.height = 300;
console.log(canvas.width, canvas.height); // 400 300

Dimensione CSS e dimensione del buffer

width/height in CSS ridimensionano il canvas sullo schermo, ma NON modificano il buffer di pixel. Se differiscono dagli attributi, i disegni appaiono sfocati o deformati. Li mantenga sincronizzati per ottenere un risultato nitido.

canvas.width = 400;  // buffer pixels
canvas.style.width = "400px"; // display size — match it

Gestire gli schermi ad alta densità

Sui display Retina, devicePixelRatio è spesso pari a 2. Aumenti le dimensioni del buffer e riduca quelle del context, così le linee rimangono nitide.

const dpr = window.devicePixelRatio || 1;
canvas.width = 400 * dpr;
canvas.height = 300 * dpr;
canvas.style.width = "400px";
canvas.style.height = "300px";
ctx.scale(dpr, dpr);

Impostare gli stili di riempimento e del contorno

Lo stato del disegno risiede nel context. fillStyle imposta il colore di riempimento, mentre strokeStyle imposta il colore del contorno. Entrambi accettano qualsiasi stringa di colore CSS.

ctx.fillStyle = "#3498db";
ctx.strokeStyle = "rgba(231, 76, 60, 0.8)";
ctx.lineWidth = 4;

Il primo disegno

Quando il context è pronto, può iniziare subito a disegnare. fillRect(x, y, w, h) dipinge un rettangolo pieno usando l'attuale fillStyle.

const ctx = document.getElementById("board").getContext("2d");
ctx.fillStyle = "tomato";
ctx.fillRect(20, 20, 150, 80);

Cancellare il canvas

clearRect(x, y, w, h) cancella una regione rettangolare, riportandola alla trasparenza. Cancellare l'intero buffer è normalmente il primo passaggio di ogni fotogramma dell'animazione.

ctx.clearRect(0, 0, canvas.width, canvas.height);

Salvare e ripristinare lo stato

save() inserisce lo stile e la trasformazione correnti in uno stack; restore() li estrae nuovamente. In questo modo le modifiche temporanee rimangono isolate.

ctx.save();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 50, 50);
ctx.restore(); // fillStyle reverts to previous value

Rilevamento delle funzionalità

Per gestire i browser molto datati, verifichi che getContext esista prima di usarlo.

const canvas = document.getElementById("board");
if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // safe to draw
} else {
  console.log("Canvas not supported");
}

Verifica rapida

Verifichi la sua comprensione della configurazione del canvas.

Riepilogo: configurazione di Canvas

Ha imparato a recuperare il canvas, chiamare getContext('2d'), comprendere l'origine nell'angolo in alto a sinistra, impostare le dimensioni del buffer e quelle CSS, gestire gli schermi ad alta densità con devicePixelRatio e configurare fillStyle/strokeStyle. Ora passiamo al disegno di forme e tracciati.

Domande Frequenti

La lezione «Configurare il contesto Canvas» è gratuita?

Sì — il testo completo di «Configurare il contesto Canvas» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Configurare il contesto Canvas»?

Ottenga e configuri il contesto di rendering 2D. Eserciti JavaScript 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 JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript 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 1 di 4.

Quanto tempo richiede la lezione «Configurare il contesto Canvas»?

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 JavaScript Academy?

Sì. Ogni lezione JavaScript 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

← Torna a JavaScript Academy