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


Rettangoli

Per usare figure rettangolari possono essere utilizzati i metodi: rect (), strokeRect (), fillRect () e clearRect()

Con il metodo clearRect() è possibile cancellare un'area rettangolare.  

Questi metodi richiedono i parametri: 
Il punto (x, y) di partenza, lunghezza e altezza del rettangolo come valori numerici espressi in pixel.

Descrizione dei metodi: 

  • rect(x, y, larghezza, altezza): Definisce i lati del rettangolo nel colore specificato dall'attributo strokeStyle.
    Prende come parametri, il punto in cui il rettangolo inizia (x, y), la larghezza del rettangolo e la sua altezza.
    NOTA: non disegna realmente il rettangolo ma solo predispone alla scrittura, per disegnarlo realmente si dovrà utilizzare di seguito il metodo stroke().
  • strokeStyle: (gia definito nel paragrafo Comandi di base) Definisce il colore di qualsiasi figura disegnata sul <canvas> e quindi anche dei rettangoli.
    Nell'esempio della pagina successiva definisce il colore del rettangolo da disegnare.
    L'attributo strokeStyle () deve essere accoppiato con il metodo stroke () o il metodo strokeRect ().
    Se strokeStyle non viene specificato il sistema assume il colore nero per default.
  • fillStyle: - 600-- Definisce il colore di riempimento per qualsiasi forma chiusa disegnata sul <canvas>.
    Per avere effetto, deve essere usato con i metodi di riempimento fill()fillRect ().
    Se fillStyle non è specificato, fill()fillRect () di default assumeranno il colore nero.
    (Vedere anche il paragrafo Colori, gradienti e stili)
  • strokeRect(x, y, larghezza, altezza): Disegna i lati del rettangolo nel colore specificato dall'attributo strokeStyle.
    I valori in x,y determinano, sulla <canvas>, il punto in alto a sinistra del rettangolo, larghezza e altrazza la distanza dal punti x,y.
  • fillRect(x, y, larghezza, altezza): Disegna un rettangolo col l'area del colore specificato con l'attributo fillStyle.
    I valori in x,y determinano, sulla <canvas>, il punto in alto a sinistra del rettangolo, larghezza e altrazza la distanza dal punti x,y.
  • clearRect(x, y, larghezza, altezza): Cancella una zona rettengolare sul canvas. 
    Prende come parametri, il punto in cui il rettangolo inizia (x, y),  larghezza e altezza.
  • isPointInPath: Restituisce vero se il punto specificato è nel percorso corrente

Differenza tra rect(), fillRect (), strokeRect () 
La funzione rect() è una funzione "percorso" - cioè non disegna nulla fino a quando si chiama la funzione stroke() o fill() .
Le funzione strokeRect () e fillRect () disegnano immediatamente un rettangolo quando vegono chiamate. 

 

 

 

 




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