Utilizzo cookies

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() o fillRect ().
Se fillStyle non è specificato, fill() o 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