JavaScript'de canvas arkaly çyzyk çekmek
Ýönekeý işden başlaýarys - çyzyk çekmekden. Munyň nähili edilýändigini düşünmek üçin, öňüňizde kagyzyňyz we karandaşyňyz bar diýip göz öňüne getiriň. Siz bu kagyzda çyzyp bilersiňiz, ýa-da çyzmasdan diňe gerekli nokada karandaşy hereketdirdip bilersiňiz.
JavaScript hem şeýle işleýär: onuň karandaşy (ýa-da çyzyk çekmek üçin perosy) bar, gerekli
ýere ony moveTo metodu arkaly hereketdirdip bilersiňiz,
çyzyk çekmek üçin bolsa lineTo metoduny ulanyp bilersiňiz.
Her iki metod parametr hökmünde peronyň ujuny nirä süýjürjekdigini alýar - birinji parametr
gorizontaldaky koordinata, ikinjisi bolsa - wertikal boýunça. Koordinatalaryň başlangyjy - 0,
0 nokady - elementüň ýokarky çep burçy.
Pero gerekli nokada süýşende -
moveTo metodu diňe süýşürýär, we
lineTo süýşüriş prosesinde peronyň häzirki ýerinden süýşýän nokadasyna çenli
çyzyk çekýär.
Ýöne, ýokardaky kody işletsek
- hiç zat bolmaz: iki sany çykyşdyryjy ýazmaly: birinji çykyşdyryjy beginPath
çyzyk çekmegiň başynda görkezmeli, we ikinji çykyşdyryjy stroke
moveTo we lineTo kombinasiýalarynyň hemmesinden soň
çaýrylmagy gerek, çyzygyň çyzylyşy üçin.
Şeýlelik bilen, geliň işleýän çyzyk çekme kody ýazaýalyň:
Çyzyk çekeliň
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Jüjük çekeliň
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Üçburçluk çekeliň
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Kwadrat çekeliň
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Şekilleri ýapmak
Ýapyk şekil çekmek üçin ähli çyzyklary etmek hökmany däl -
iň soňky çyzyk awtomatiki suratda çyzylip we şekli ýapyp biler.
Bunüň üçin stroke metoddan ozal
closePath metoduny çagyrmaly.
Bu metod şekli ýapmaga synanyşýar, başlangyç nokadan soňky nokada çenli göni çyzyk çekmek arkaly. Eger şekil eýýäm ýapyk bolsa ýa-da diňe nokat bolsa, onda metod hiç zat etmez.
Geliň closePath ulanyp, üçburçluk çekeliň:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - bu ädimi geçýäris
ctx.closePath();
ctx.stroke();
:
Şekilleri doldurmak
stroke metodunyň ornuna
fill metodyny ulanmak bolýar - bu ýagdaýda şekil hökmany däl
doly ýapyk bolmaly - ol her halatda dolar:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - bu ädimi geçýäris
//ctx.closePath(); - we muny hem
ctx.fill();
:
