JavaScript-də canvas vasitəsilə düzbucaqlıların çəkilməsi
Kvadrat və düzbucaqlıları mütləq moveTo,
lineTo birləşmələri ilə çəkmək lazım deyil
- bunun üçün daha sadə metodlar var.
Gəlin onları nəzərdən keçirək.
strokeRect metodu
strokeRect(x, y, en, hündürlük)
metodu verilmiş nöqtədə düzbucaqlının konturunu
çəkir. İlk iki parametr çəkilmiş düzbucaqlının
yuxarı sol küncünün yerləşəcəyi nöqtənin
koordinatlarını təyin edir.
Gəlin strokeRect ilə bir düzbucaqlı çəkək
(fərz edək ki, ctx artıq mövcuddur):
<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 metodu
fillRect(x, y, en, hündürlük)
metodu strokeRect kimi işləyir,
yalnız rənglənmiş düzbucaqlı çəkir.
Nümunəyə baxaq:
<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 metodu
Növbəti metod rect(x, y, en, hündürlük)
da düzbucaqlı çəkir. Lakin bu düzbucaqlı yalnız
stroke və ya fill metodu tətbiq
edildikdə görünən olacaq. Birinci halda kontur,
ikinci halda isə rənglənmiş fiqur olacaq.
Gəlin rect ilə kontur çəkək:
<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();
:
İndi isə rənglənmiş fiqur çəkək:
<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 metodu
Növbəti metod clearRect(x, y, en, hündürlük)
pozucu kimi işləyir, düzbucaqlı sahəni təmizləyir və
məzmunu tamamilə şəffaf edir.
Gəlin fillRect ilə kiçik bir kvadrat çəkək
və onun bir hissəsini clearRect ilə siliək:
<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);
:
