JavaScript arkaly canvas üsti bilen dörtburçluklary çyzmak

Kwadratlary we dörtburçluklary hökmany moveTo, lineTo kombinasiýalary arkaly çyzmak hökman däl - bunuň üçin has ýönekeý usullary bar. Geliň olary gözden geçireýliň.

strokeRect usuly

strokeRect(x, y, ini, beýiklik) usuly berlen nokatda dörtburçlugyň konturuny çyzyar. Ilkinji iki parametr çyzylan dörtburçlugyň çep ýokary burçunyň ýerleşýän nokadynyň koordinatalaryny kesgitleýär.

Geliň strokeRect arkaly bir dörtburçluk çyzalyň (ctx bar bolan ýaly kabul edýäris):

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 usuly

fillRect(x, y, ini, beýiklik) usuly strokeRect ýaly işleýär, ýöne boýalan dörtburçluk çyzyar. Mysal üçin seredeliň:

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 usuly

Indiki rect(x, y, ini, beýiklik) usuly hem dörtburçluk çyzyar. Ýöne bu dörtburçluk diňe stroke ýa-da fill usullaryny ulananyňyzdan soň görünýär. Birinji ýagdaýda kontur, ikinjide bolsa şekil bolýar.

Geliň rect arkaly bir kontur çyzalyň:

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

Результат:

Indi bolsa bir şekil çyzalyň:

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 usuly

Indiki clearRect(x, y, ini, beýiklik) usuly bir öçürijiniň işi ýaly işleýär, dörtburçluk meýdany arassalaýar we mazmuny doly şaffaf edýär.

Geliň fillRect arkaly bir kiçijik kwadrat çyzalyň we onuň bir bölegini clearRect arkaly öçüreliň:

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

Результат: