HTML and CSS Reference
In-Depth Information
Si basa interamente sullo scripting, perché non esiste una sintassi di disegno ma delle
API da chiamare per preparare la bitmap. Per capire come funziona, creiamo una pagina
HTML5, inserendo il tag
canvas
nel punto in cui vogliamo renderizzare i contenuti.
Esempio 10.19
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/ecmascript">
var context;
function start() {
context = canvas.getContext("2d")
;
}
</script>
</head>
<body onload="start()">
<canvas id="canvas" width="400" height="300">
</canvas>
</body>
</html>
mente o indirettamente, deve essere fatta, così da delineare l'area di rendering. Oltre a que-
sto, al
load
della pagina otteniamo il contesto di disegno, chiamando la funzione
ge-
tContext
. Quest'ultima determina le API di disegno che possiamo chiamare sul conte-
sto, di cui esiste una sola tipologia standard di nome
2d
. Esiste anche un'implementazione
di nome
WebGl
, implementata solo da alcuni browser, che porta le API di rendering 3D
sul contesto del
canvas
.
In questa sede ci occupiamo delle API 2d, al fine di capire come possiamo impiegare il
canvas
e trarne vantaggi.
Abbiamo accennato al fatto che il
canvas
trova soprattutto applicazioni nei giochi, per-
ciò, per capire come sfruttarlo, svilupperemo una semplice superficie con una palla che
rimbalza lungo i confini del
canvas
. Rispetto a SVG, non ci troviamo più a lavorare con
