Rettangoli con canvas e javascript - matematica con JavaScript

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.

<HTML> <BODY> <canvas id="lavagna" width=250 height=250> </canvas> <script> var c = document.getElementById('lavagna'); var ctx=c.getContext("2d"); var w=10; var h=10; for (x=10;x<=c.width-20;x+=10){ y=x ctx.fillRect(x,y,w,h); ctx.fillRect(c.width-x,y,w,h); } </script> </BODY> </HTML>

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