JavaScript-də canvas vasitəsilə xətt çəkmək
Sadədən başlayaq - xətt çəkməklə. Bunun necə edildiyini başa düşmək üçün təsəvvür edin ki, sizin bir kağız vərəqi və qələminiz var. Siz bu vərəqin üzərində rəsm çəkə bilərsiniz, ya da çəkmədən sadəcə qələmi lazımi nöqtəyə köçürə bilərsiniz.
JavaScript də eynilə işləyir: onun bir qələmi (və ya rəsm çəkmək üçün qələm) var, siz onu moveTo metodu ilə lazımi yerə köçürə bilərsiniz, rəsm çəkmək üçün isə lineTo metodundan istifadə edə bilərsiniz.
Hər iki metod parametr kimi qələmin ucunun köçürüləcəyi nöqtəni qəbul edir - birinci parametr üfüqi koordinat, ikincisi isə şaquli koordinatdır. Koordinatların başlanğıcı - 0, 0 nöqtəsidir - bu elementin yuxarı sol küncüdür.
Qələm lazımi nöqtəyə köçürüldükdə - moveTo metodu sadəcə köçürür, lineTo metodu isə köçürmə prosesində qələmin hazırkı mövqeyindən onun köçürüləcəyi nöqtəyə qədər bir xətt çəkir.
Lakin, yuxarıdakı kodu işə salsanız - heç nə baş verməyəcək: daha iki əmr yazmaq lazımdır: birinci əmr beginPath xətt çəkməyə başlamazdan əvvəl göstərilməlidir, ikinci əmr stroke isə bütün moveTo və lineTo kombinasiyalarından sonra xəttin çəkilməsi üçün çağırılmalıdır.
Beləliklə, gəlin işləyən xətt çəkmə kodu yazaq:
Xətt çəkək
<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();
:
Quşcuq çəkək
<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();
:
Üçbucaq çəkək
<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();
:
Kvadrat çəkək
<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();
:
Fiqurların bağlanması
Bağlanmış fiqur çəkmək üçün bütün xətləri çəkmək mütləq deyil - son xətt avtomatik çəkilib fiquru bağlaya bilər. Bunun üçün stroke metodundan əvvəl closePath metodunu çağırmaq lazımdır.
Bu metod fiquru bağlamağa çalışır, son nöqtədən başlanğıc nöqtəyə düz xətt çəkməklə. Əgər fiqur artıq bağlanıbsa və ya sadəcə nöqtədirsə, metod heç nə etmir.
Gəlin closePath istifadə edərək üçbucaq çəkək:
<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 addımı atlayırıq
ctx.closePath();
ctx.stroke();
:
Fiqurların rəngləndirilməsi
stroke metodu əvəzinə fill metodundan istifadə etmək olar - bu zaman fiqurun tam bağlanması mütləq deyil - o hər halda rənglənəcək:
<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 addımı atlayırıq
//ctx.closePath(); - və bunu da
ctx.fill();
:
