Utilizzo cookies
L'e-book interattivo I colori Comandi base save() & restore() Stili di linee Rettangoli Archi e Circonferenze clip() Colori gradienti e stili Effetti Ombra Curve di Bezier Testo Trasformazioni Disegnare con Immagini Manipolazione dei Pixel Alpha trasparenza globalCompositeOperation convertire <canvas> Animazioni Grafici 20 Equazioni e spirali

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