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

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 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:

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 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:

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

Результат:

İndi isə rənglənmiş fiqur çəkək:

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 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:

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

Результат: