Disegnare rettangoli tramite canvas in JavaScript
I quadrati e i rettangoli non è necessario
disegnarli utilizzando combinazioni di moveTo,
lineTo - per questo esistono metodi più semplici.
Analizziamoli.
Metodo strokeRect
Il metodo strokeRect(x, y, larghezza,
altezza) disegna il contorno di un rettangolo
in un punto specificato. I primi due parametri
impostano le coordinate del punto in cui si
troverà l'angolo superiore sinistro del
rettangolo disegnato.
Disegniamo un rettangolo utilizzando
strokeRect (supponiamo che ctx
sia già definito):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Metodo fillRect
Il metodo fillRect(x, y, larghezza, altezza)
funziona come strokeRect,
ma disegna un rettangolo riempito.
Vediamo un esempio:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Metodo rect
Il metodo successivo rect(x, y, larghezza,
altezza) disegna anch'esso un rettangolo. Ma
questo rettangolo diventerà visibile solo
se viene applicato il metodo stroke o fill.
Nel primo caso sarà un contorno, nel secondo
- una figura piena.
Disegniamo un contorno utilizzando rect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
E ora disegniamo una figura piena:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Metodo clearRect
Il metodo successivo clearRect(x, y,
larghezza, altezza) funziona come una gomma,
pulendo un'area rettangolare e rendendo il
contenuto completamente trasparente.
Disegniamo un quadratino utilizzando fillRect
e cancelliamone una parte con clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
