HOME

Contatti

MATEMATICA CON JAVASCRIPT - GUIDA CANVAS


2 - Metodi rect() - strokeRect() - fillRect() - clearRect()

Precedente - Indice guida canvas - Successivo


A
rgomenti correlati:

 

Punti come rettangoli


Inserire i valori 1,1 al posto di width e height.
ESEMPIO
ctx.rect(10,20,1,1);
ctx.fill();
oppure
ctx.rect(10,20,1,1);
ctx.stroke();
oppure
fillRect(10,20,1,1);
oppure
strokeRect(10,20,1,1);
Con uno dei metodi precedenti si ottiene un punto in posizione (10,20) rispetto all'usuale sistema di riferimento.


Primo esempio di grafico



Anche se ancora siamo solo alla seconda lezione, vediamo che, con l'aiuto di un semplice ciclo enumerativo, è possibile disegnare una cornicetta come quella in figura. Segue il codice.


Secondo esempio di grafico


Si ottiene sostituendo i seguenti valori nel codice precedente:
var w=2;
var h=2;
for (x=10;x<=c.width;x+=5){

 


METODO rect(x,y,width,height)    

Crea un rettangolo, senza disegnarlo. I parametri in parentesi, obbligatori, rappresentano:

x = ascissa del vertice superiore sinistro (distanza dal bordo sinistro della canvas);
y = ordinata del vertice superiore sinistro (distanza dal bordo in alto della canvas )
width = misura della base del rettangolo;
height = misura dell'altezza del rettangolo.
L'unità di misura è il pixel.

Una volta creato il rettangolo, potremo disegnarne il contorno con il metodo stroke() o riempirlo con il metodo fill()

ESEMPIO DI CODICE

RISULTATO

 


Vi invitiamo, se volete provare il codice, a visionare la sezione

PROVA TU - METODO rect()

 

METODO strokeRect(x,y,width,height)    

Riassume, in un'unica istruzione, le due righe di codice

ctx.rect(x,y, width,height);
ctx.stroke();

Dunque crea un rettangolo e ne disegna il contorno.

METODO fillRect(x,y,width,height)    

Riassume, in un'unica istruzione, le due righe di codice

ctx.rect(x,y, width,height);
ctx.fill();

Dunque crea un rettangolo e ne colora l'interno.

METODO clearRect(x,y,width,height)    

Cancella un rettangolo all'interno di un altro rettangolo. Esempio di codice:

ctx.fillRect(10,15,100,120);
ctx.clearRect(30,20,6,50);
Cancella il rettangolo di vertice superiore sinistro V(30,20), di base 6 pixel e altezza 50 pixel, dal rettangolo di vertice superiore sinistro A(10,15), di base 100 pixel e altezza 120 pixel.

 


Vi invitiamo, se volete provare il vostro codice, a visionare la sezione

PROVA TU - METODO clearRect()

 


 

Precedente - Successivo

 


IN EVIDENZA DAL SITO

 







CALCOLATRICE
SCIENTIFICA



CON SPIEGAZIONI
ED ESEMPI

 




TARTAMONDO - PER BAMBINI




AREA GIOCHI

 

 

 

 

 



Foto di Tommaso Bientinesi

Passione per i viaggi e la natura





Guida a matematica con javascript: indice  -  Guida al tag HTML5 canvas: indice


©2002 - 2013 www.webfract.it