Page 62 - Guida tascabile HTML5
P. 62
variabile rif.
var contesto = rif.getContext("2d");
Con la seconda istruzione si crea la variabile contesto, definendo l’ambiente di
disegno bidimensionale (2d).
contesto.fillStyle = "red";
La terza istruzione definisce lo stile di riempimento, in questo caso rosso pieno.
contesto.fillRect(144,81,32,18);
L’ultima istruzione disegna il rettangolo specificando nell’ordine le coordinate x
e y di partenza (relative all’angolo superiore sinistro del canvas), la larghezza e
l’altezza.
ATTENZIONE Le potenzialità del binomio <canvas> e JavaScript meritano senza dubbio
un approfondimento dedicato, ma questo manuale non ha la pretesa di trattare in
modo completo un tema, vasto e complesso, per cui sarebbe necessaria anche una
più dettagliata introduzione al linguaggio JavaScript. Il lettore interessato all’argomento
troverà testi specifici nella collana Guida Completa edita da Apogeo.
Ecco un esempio leggermente più strutturato, che illustra alcune forme base che
è possibile disegnare sul canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas HTML5</title>
</head>
<body>
<header>
<h1>Canvas HTML5</h1>
</header>
<main>
<canvas id="disegno" width="320" height="180">
<p>Questo browser non supporta il tag HTML5 canvas</p>
</canvas>
</main>
<footer>
<p>Termine del documento</p>
</footer>
<script>
var riferimento = document.getElementById("disegno");
var contesto = riferimento.getContext("2d");
/* linee */
contesto.strokeStyle = "lightgrey";
contesto.lineWidth = 10;
contesto.moveTo(0,20);
contesto.lineTo(320,20);
contesto.moveTo(0,160);
contesto.lineTo(320,160);
contesto.stroke();
