Disegnare sulla tela con JavaScript
Tutti attingendo alle tele HTML deve essere fatto con JavaScript:
Esempio
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Prova tu stesso " Fase 1: trovare l'elemento Canvas
Prima di tutto, è necessario trovare il <canvas> elemento.
Questo viene fatto utilizzando il metodo HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
Fase 2: Creazione di un oggetto di disegno
In secondo luogo, è necessario un oggetto di disegno per la tela.
Il getContext() è un oggetto HTML integrato, con proprietà e metodi per il disegno:
var ctx = canvas.getContext("2d");
Fase 3: disegnare sulla tela di canapa
Infine, è possibile disegnare sulla tela.
Impostare lo stile di riempimento dell'oggetto disegno per il colore rosso:
ctx.fillStyle = "#FF0000";La proprietà fillStyle può essere un colore CSS, una sfumatura o un pattern. Il fillStyle predefinito è il nero.
Il fillRect( x,y,width,height ) metodo disegna un rettangolo, pieno di stile di riempimento, sulla tela:
ctx.fillRect(0,0,150,75);