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):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

E ora disegniamo una figura piena:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: