Canvas e html5: Come disegnare una linea

Come abbiamo accennato precedentemente, il tag canvas serve a disegnare forme geometriche.

Partiamo, pertanto, dalla forma più semplice rappresentata dalla linea.

Questo script mostra come disegnare una semplice linea.

 Linea retta

 
 Questo browser non supporta il il tag canvas.

Nel tag <canvas></canvas> impostiamo il valore id che verrà successivamente richiamato nello script, la lunghezza e l’ampiezza del canvas, per stabilire le dimensioni dello spazio dove disegnare le figure geometriche.

Fra i due marcatori canvas è possibile digitare un avviso che verrà visualizzato nel caso in cui il browser non supporti il tag.

Richiamiamo il canvas tramite il suo id con getElementById() e le librerie Api  per la visualizzazione delle immagini in 2d con getContext(“2d”);

Le variabili che troviamo impostate sono retta e sottile, come si vede sottile contiene anche il valore della variabile retta.

La variabile sottile verrà utilizzata nello script abbinata ai metodi indicati qui di seguito che servono per definire la linea da tracciare:

moveTo(x,y); sposta il percorso ed indica il punto di inizio della linea all’interno del canvas. Il punto d’inizio è dato dai valori x ed y che rappresentano corrispettivamente la posizione orizzontale sull’asse x e la posizione in verticale sull’asse y. 

lineTo(x,y); crea una linea partendo dal punto indicato dal primo valore sull’asse x indicata da moveTo(), mentre il secondo valore rappresenta il punto sull’asse y. I due valori rappresentano i punti di inizio e fine della linea.

stroke(); è il metodo che visualizza la linea nella pagina web.

Questa immagine fornisce una rappresentazione grafica delle coordinate.

Nel prossimo capitolo vedremo come utilizzare, invece, il metodo beginPath().

Per scaricare il file dimostrativo clicca su uno dei pulsanti sottostanti per attivare il download del file.

download esempio canvaslinea
Link a questo articolo!Canvas e html5: Come disegnare una linea" readonly="readonly" type="text" style="width: 100%;" onclick="javascript:this.select()" /> Category: Canvas e html5