Desenarea dreptunghiurilor prin canvas în JavaScript

Pătratele și dreptunghiurile nu este obligatoriu să fie desenate cu ajutorul combinațiilor moveTo, lineTo - pentru asta există metode și mai simple. Să le analizăm.

Metoda strokeRect

Metoda strokeRect(x, y, lățime, înălțime) desenează în punctul dat conturul unui dreptunghi. Primii doi parametri stabilesc coordonatele punctului, în care se va afla colțul stânga sus al dreptunghiului desenat.

Să desenăm un dreptunghi cu ajutorul strokeRect (considerăm că ctx deja există):

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

Результат:

Metoda fillRect

Metoda fillRect(x, y, lățime, înălțime) funcționează la fel ca și strokeRect, doar că desenează un dreptunghi umplut. Să vedem un exemplu:

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

Результат:

Metoda rect

Următoarea metodă rect(x, y, lățime, înălțime) de asemenea desenează un dreptunghi. Dar acest dreptunghi va deveni vizibil, doar dacă se aplică metoda stroke sau fill. În primul caz va fi contur, iar în al doilea - o figură.

Să desenăm un contur cu ajutorul 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();

Результат:

Și acum să desenăm o figură:

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();

Результат:

Metoda clearRect

Următoarea metodă clearRect(x, y, lățime, înălțime) funcționează ca o radieră, curățând o zonă dreptunghiulară și făcând conținutul complet transparent.

Să desenăm un pătrățel cu ajutorul fillRect și să ștergem o parte a lui cu ajutorul 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);

Результат: