JavaScript orqali canvasda to'rtburchaklar chizish

Kvadrat va to'rtburchaklarni majburiy ravishda moveTo va lineTo kombinatsiyalari yordamida chizish shart emas - buning uchun oddiyroq usullar mavjud. Keling ularni ko'rib chiqaylik.

strokeRect usuli

strokeRect(x, y, kenglik, balandlik) usuli berilgan nuqtada to'rtburchakning konturini chizadi. Dastlabki ikkita parametr chizilgan to'rtburchakning chap yuqori burchagi joylashadigan nuqta koordinatalarini belgilaydi.

Keling strokeRect yordamida to'rtburchak chizamiz (ctx allaqachon mavjud deb hisoblaymiz):

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

Результат:

fillRect usuli

fillRect(x, y, kenglik, balandlik) usuli strokeRect kabi ishlaydi, faqat bo'yalgan to'rtburchakni chizadi. Keling misol orqali ko'rib chiqaylik:

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

Результат:

rect usuli

Keyingi rect(x, y, kenglik, balandlik) usuli ham to'rtburchak chizadi. Lekin ushbu to'rtburchak faqat stroke yoki fill usulini qo'llash orqali ko'rinadigan bo'ladi. Birinchi holatda kontur, ikkinchi holatda esa shakl paydo bo'ladi.

Keling rect yordamida kontur chizamiz:

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

Результат:

Endi esa shakl chizamiz:

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

Результат:

clearRect usuli

Keyingi clearRect(x, y, kenglik, balandlik) usuli o'chirgich kabi ishlaydi, to'rtburchak shaklidagi maydonni tozalab, tarkibni butunlay shaffof qiladi.

Keling fillRect yordamida kvadrat chizamiz va uning bir qismini clearRect yordamida o'chiramiz:

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

Результат: