Disegno su tela HTML
Disegna sulla tela con JavaScript
Tutti i disegni sulla tela HTML devono essere eseguiti con JavaScript:
Esempio
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Passaggio 1: trova l'elemento Canvas
Prima di tutto, devi trovare l'elemento <canvas>.
Questo viene fatto utilizzando il metodo HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
Passaggio 2: crea un oggetto di disegno
In secondo luogo, hai bisogno di un oggetto di disegno per la tela.
getContext() è un oggetto HTML integrato, con proprietà e metodi per disegnare:
var ctx = canvas.getContext("2d");
Passaggio 3: disegna sulla tela
Infine, puoi disegnare sulla tela.
Imposta lo stile di riempimento dell'oggetto di disegno sul colore rosso:
ctx.fillStyle = "#FF0000";
La proprietà fillStyle può essere un colore CSS, una sfumatura o un motivo. Lo stile di riempimento predefinito è nero.
Il metodo fillRect( x,y,width,height ) disegna un rettangolo, riempito con lo stile di riempimento, sull'area di lavoro:
ctx.fillRect(0, 0, 150, 75);