API Canvas

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

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

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>

Provatelo 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 superficie, 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 superficie

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

Il metodo fillRect() di seguito disegna un rettangolo nero con l'angolo in alto a sinistra situato in 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);

Provatelo 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);

Provatelo 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);

Provatelo personalmente

Percorso

I metodi comuni per disegnare su una superficie sono:

1. Iniziare un percorso - beginPath()
2. Spostarsi a un punto - moveTo()
3. Disegnare all'interno del percorso - lineTo()
4. Disegnare 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();

Provatelo personalmente