L’oggetto Canvas si comporta come una tela (un pannello) all’interno della pagina HTML.
1 |
<canvas></canvas> |
Le proprietà essenziali sono
- height=…, la dimensione verticale del pannello, in pixel
- id=”…”, permette a Javascript di raggiungere l’oggetto tramite getElementById(“…”)
- width=…, la dimensione orizzontale del pannello, in pixel
1 |
<canvas height="..." id="..." width="..."></canvas> |
Altri attributi (tutti quelli globali in HTML!)
- style=”…”, specifiche di stile CSS in linea
- title=”…”, tooltip, suggerimento
- …
1 |
<canvas height="..." id="..." style="..." title="..." width="..."></canvas> |
Il pannello standard appare come una superficie bianca senza contorno (è invisibile…)
In assenza delle dimensioni saranno applicate le misure standard 300×150.
1 |
<canvas id="canvas1"></canvas> |
L’attributo style è essenziale per fissare le caratteristiche del bordo
1 |
<canvas id="canvas2" style="border: 1px solid;"></canvas> |
… e dello sfondo
1 |
<canvas id="canvas3" style="background-color: yellow; border: 3px solid blue;"></canvas> |
L’attributo style segue la sintassi dei CSS…