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):
<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);
:
fillRect usuli
fillRect(x, y, kenglik, balandlik)
usuli strokeRect kabi ishlaydi,
faqat bo'yalgan to'rtburchakni chizadi.
Keling misol orqali ko'rib chiqaylik:
<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);
:
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:
<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();
:
Endi esa shakl chizamiz:
<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();
:
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:
<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);
:
