Page 61 - Guida tascabile HTML5
P. 61
Figura 4.3 Il tag <canvas> inizialmente non ha un aspetto caratteristico: è un
rettangolo trasparente nel flusso del documento.
A questo punto, tramite il tag <script> già descritto nel Capitolo 1, è possibile
intervenire sull’aspetto e il comportamento dell’area identificata nel markup
HTML.
NOTA Le istruzioni JavaScript in questione devono essere eseguite dopo il rendering
del canvas nella pagina: in questo esempio, per evitare intoppi, inserite il tag <script>
appena prima del tag di chiusura </body>.
<script>
var rif = document.getElementById("disegno");
var contesto = rif.getContext("2d");
contesto.fillStyle = "red";
contesto.fillRect(144,81,32,18);
</script>
Questo estratto di codice JavaScript permette di disegnare un rettangolo rosso di
dimensioni 32x18 pixel nel centro del canvas dichiarato in precedenza.
var rif = document.getElementById("disegno");
Con la prima istruzione si scorrono i nodi del documento per individuare
l’elemento con attributo id uguale a disegno, creando un riferimento con la
