Oggetto Canvas DOM HTML

L'elemento <canvas> definisce un'area bitmap nella pagina HTML.

L'API Canvas permette a JavaScript di disegnare grafici sulla lavagna.

L'API Canvas può disegnare forme, linee, curve, rettangoli, testo e immagini, nonché colori, rotazioni, trasparenze e altre operazioni sui pixel.

Aggiungi Canvas all'HTML

Puoi aggiungere l'elemento canvas in qualsiasi posizione della pagina HTML utilizzando il tag <canvas>:

Esempio

<canvas id="myCanvas" width="300" height="150"></canvas>

Prova personalmente

Come accedere all'elemento Canvas

Puoi accedere all'elemento <canvas> utilizzando il metodo HTML DOM getElementById():

const myCanvas = document.getElementById("myCanvas");

Per disegnare sulla lavagna, devi creare l'oggetto contesto 2D:

const ctx = myCanvas.getContext("2d");

Note

L'elemento HTML <canvas> non ha funzionalità di disegno.

Devi utilizzare JavaScript per disegnare qualsiasi grafico.

Il metodo getContext() restituisce un oggetto con strumenti di disegno (metodi).

Disegnare sulla lavagna

Dopo aver creato l'oggetto contesto 2D, puoi disegnare sulla lavagna.

Il metodo fillRect() di seguito disegna un rettangolo nero con l'angolo in alto a sinistra situato alla posizione 20,20. Il rettangolo ha una larghezza di 150 pixel e una altezza di 100 pixel:

Esempio

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Prova personalmente

Utilizzando il colore

L'attributo fillStyle imposta il colore di riempimento dell'oggetto di disegno.

Esempio

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Prova personalmente

Puoi anche creare un nuovo elemento <canvas> utilizzando il metodo document.createElement() e aggiungerlo alla pagina HTML esistente:

Esempio

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Prova personalmente

Percorso

I metodi comuni per disegnare su una lavagna sono:

1. Inizia un percorso - beginPath()
2. Sposta a un punto - moveTo()
3. Disegna nel percorso - lineTo()
4. Disegna un percorso - stroke()

Esempio

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Prova personalmente