L’html5 introduce il tag canvas, uno spazio che si può paragonare ad una lavagna dove disegnare le diverse figure geometriche come cerchi, linee, archi e quadrati.
Per usare questo nuovo marcatore è necessario integrarlo con javascript, per questo motivo è indispensabile avere delle nozioni base di questo linguaggio per comprendere gli script usati all’interno di questo marcatore.
Esaminiamo il codice base che sarà sempre presente nell’uso del canvas:
<canvas id="linea" width="600" height="250">
</canvas>
<script type="text/javascript">
var retta = document.getElementById("linea");
var context = retta.getContext("2d");
</script>
Nel tag canvas troviamo assegnato il nome con l’id e l’altezza e l’ampiezza tramite width ed height.
GetElementbyId(“linea”) richiama il canvas tramite il suo id, mentre getContex(“2d”) richiama le Api previste per il disegno in 2d.
Come possiamo vedere retta e context sono delle variabili. In questo esempio le variabili vengono esplicitate tramite la desinenza var.
Il codice riportato in questo articolo rappresenta solo lo script base che dobbiamo usare per impostare questo marcatore, ma non visualizza nessun elemento grafico nella pagina web.
Più avanti verrà spiegato come impostare le varie figure geometriche e le loro proprietà.
Nel prossimo articolo vedremo come disegnare una linea all’interno di un canvas.
Lascia pure un tuo parere tramite la sezione commenti.
Link a questo articolo!Come impostare il tag Canvas in Html5" readonly="readonly" type="text" style="width: 100%;" onclick="javascript:this.select()" /> Category: Canvas e html5