Utilizzo cookies

HTML5 canvas in tempo reale

Comandi base

I camandi seguenti sono necessari ad ogni operazione da compiersi su <canvas> e nessuno di essi viene usato senza gli altri.

beginPath() inizia un percorso, o resetta il percorso corrente.
Vuota buffer consentendo di avviare il disegno di un nuovo elemento.
Considerando carta penna, è paragonabile a sollevare la punta della penna dal foglio preparandosi ad iniziare o continuare il disegno in un nuovo punto del <canvas>.
Dopo aver chiamato BeginPath (), possiamo quindi utilizzare moveTo (), lineTo (), quadricCurveTo (), bezierCurveTo (), arcTo (), e l'arco (), per creare sotto-percorsi.
Dobbiamo usare il metodo stroke () per disegnare realmente il percorso su <canvas>.
moveTo(x,y) crea un percorso del punto specificato nella <canvas>, (senza disegnare effettivamente)
x,y sono le coordinate cartesiane sul <canvas>
Occorre poi chiamare il metodo stroke() per disegnare effettivamente il tracciato sul <canvas>.
lineTo(x,y) Aggiunge un nuovo punto e crea una linea a quel punto dall'ultimo specificato,(senza disegnare effettivamente)
Utilizzando il metodo LineTo() potranno essere definiti ulteriori segmenti dall'ultimo punto definito.
Occorre poi chiamare il metodo stroke() per disegnare effettivamente il tracciato sul <canvas>.
strokeStyle(): Definisce il colore del segmento.
Opzionale assegna un colore diverso da quello di default.
Se strokeStyle() non è specificato il colore di default è il nero. (Vedere anche il paragrafo Rettangoli)
fill(): Il metodo di fill() riempie il percorso corrente.(predefinito nero).
Per cambiare un diverso colore o gradiente di riempimento impostare la proprietà FillStyle.
Se il percorso non è chiuso, fill() connetterà l'ultimo punto con il punto di inizio chiudendo l'area e colorandola.
stroke() Disegna realmente tutti i percorsi definiti.
Può essere paragonato all'inchiostro da usare per scrivere su carta, praticamente rende visibile tutto quello che è stato disegnato con moveTo(), lineTo ecc.
closePath() Crea un tracciato che collega il punto corrente al punto di partenza, generalmente moveTo(x,y)
Dopo aver chiuso il percorso è necessaro chiamare il metodo stroke() che disegna effettivamente il tracciato.
In seguito è possibile usare il metodo fill() per riempire l'area chiusa con il colore voluto o nero come predefinito.
Per non usare il nero (di default) impostare la proprietà fillStyle con un altro colore, sfumatura o motivo.

Esempio di segmenti disegnati

Per disegnare segmenti occorre definire, sul piano cartesiano del <canvas>, i punti X,Y di inizio ed X,Y finali di ciscun segmento.
Con almeno 3 segmenti ed usando gli stessi valori in moveTo(x,y) e nell'ultimo lineTo(x,y) si possono ottenere figure chiuse.

Figure chiuse possono essere ottenute anche con il metodo closePath()

Ricordare che i metodi MoveTo() e LineTo() non disegnano niente di visibile ma solo preparano al disegno che verrà effettivamente con il comando stroke().

Questo e-book è un e-book interattivo, ciò significa che il lettore può inserire dei dati nelle pagine ed il contenuto di queste si adeguerà ai nuovi valori. Per inserire i dati, nelle pagine dell’e-book, sono stati implementati dei controlli simili a quelli che si possono trovare sulle pagine Internet ed un pulsante esegui per impartire il comando di adeguare il contenuto della pagina ai nuovi valori.

Antonella Brandi
Art-designer