Per realizzare le immagini in un documento HTML possiamo inserire il comando canvas. Un primo esempio:
<canvas width=300 height=150></canvas>
<script>
pippo = document.querySelector("canvas").getContext("2d")
pippo.strokeRect(1,1, 298,148)
pippo.strokeStyle="blue"
pippo.strokeRect(20,20, 100,50)
pippo.lineWidth=3; pippo.strokeStyle="red"
pippo.strokeRect(140,20, 100,50)
</script>
=========
=========
• <canvas width=300 height=150></canvas> riserva uno spazio di 300×150 pixel per l'immagine creata dai comandi inseriti tra
<script> e </script>. Volendo si possono riservare spazi molto maggiori; queste sono le dimensioni minime usabili.
•
Devo scegliere un nome per lo spazio che creo; qui abbiamo scelto "pippo" ma si poteva usare un nome qualunque. Il nome scelto deve essere seguito da
document.querySelector("canvas").getContext("2d"). Tutti i comandi devono essere poi prededuti da "pippo.".
•
Le coordinate (intere da 0 in poi) sono in pixel, ma l'asse verticale è diretto verso il basso.
•
In molti comandi è presente la parola "stroke" che in inglese indica il "tratto di penna".
•
lineWidth consente di aumentare lo spessore delle linee, in pixel.
•
In una riga puoi mettere più comandi separati da un ";".