Disegno HTML Canvas
- Pagina precedente Introduzione a Canvas
- Pagina successiva Coordinate Canvas
Disegnare sul canvas utilizzando JavaScript
Tutte le operazioni di disegno sul canvas in HTML devono essere eseguite utilizzando JavaScript:
Esempio
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Passo 1: Trova l'elemento Canvas
Prima di tutto, devi trovare l'elemento <canvas>.
Questo viene fatto utilizzando il metodo HTML DOM getElementById():
const canvas = document.getElementById("myCanvas");
Passo 2: Crea l'oggetto di disegno
In secondo luogo, hai bisogno di un oggetto di disegno del canvas.
getContext() è un oggetto HTML integrato che fornisce attributi e metodi per il disegno:
const ctx = canvas.getContext("2d");
Passo 3: Disegna sul canvas
Infine, puoi disegnare sul canvas.
Imposta lo stile di riempimento dell'oggetto di disegno in rosso:
ctx.fillStyle = "#FF0000";
L'attributo fillStyle può essere un colore CSS, una gradazione o un disegno. Il fillStyle predefinito è nero.
Il metodo fillRect(x,y,larghezza,altezza) disegna un rettangolo sul canvas utilizzando lo stile di riempimento:
ctx.fillRect(0, 0, 150, 75);
Vedi anche:
- Pagina precedente Introduzione a Canvas
- Pagina successiva Coordinate Canvas
