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ă):
<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);
:
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:
<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);
:
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:
<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();
:
Și acum să desenăm o figură:
<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();
:
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:
<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);
:
