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):
<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 usuly
fillRect(x, y, ini, beýiklik) usuly
strokeRect ýaly işleýär, ýöne boýalan dörtburçluk
çyzyar. Mysal üçin seredeliň:
<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 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ň:
<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();
:
Indi bolsa bir şekil çyzalyň:
<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 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ň:
<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);
:
