JavaScript orqali canvasda chiziqlar chizish
Oddiydan boshlaymiz - chiziqlar chizish. Buni qanday qilishni tushunish uchun, qog'oz varag'i va qalamingiz borligini tasavvur qiling. Siz ushbu varag'da chiza olasiz, yoki chizmasdan kerakli nuqtaga qalamni ko'chirishingiz mumkin.
JavaScript ham xuddi shunday ishlaydi: uning chizish qalami (yoki qalami) bor,
kerakli joyga siz uni moveTo metodi yordamida ko'chirishingiz mumkin,
chizish uchun esa lineTo metodidan foydalanasiz.
Ikkala metod ham parametr sifatida qalam uchining ko'chadigan nuqtasini qabul qiladi -
birinchi parametr gorizontal koordinata, ikkinchisi esa vertikal koordinata.
Koordinatalar boshi - 0, 0 nuqta - bu elementning chap yuqori burchagi.
Qalam kerakli nuqtaga ko'chirilganda - moveTo metodi oddiygina ko'chiradi,
lineTo esa ko'chirish jarayonida qalamning joriy holatidan
ko'chadigan nuqtasigacha chiziq chizadi.
Biroq, agar yuqoridagi kodni ishga tushirsangiz - hech narsa bo'lmaydi:
yana ikkita buyruqni yozish kerak: birinchi beginPath buyrug'i
chiziq chizishni boshlashdan oldin ko'rsatilishi kerak,
ikkinchi stroke buyrug'i esa chiziq chizilishi uchun
barcha moveTo va lineTo kombinatsiyalaridan keyin chaqirilishi kerak.
Shunday qilib, keling chiziq chizish uchun ishlaydigan kodni yozamiz:
Chiziq chizamiz
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
Qushcha chizamiz
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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();
Результат:
Uchburchak chizamiz
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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 chizamiz
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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();
Результат:
Shakllarni yopish
Yopiq shakl chizish uchun barcha chiziqlarni qilish shart emas -
oxirgi chiziq avtomatik ravishda chizilishi va shaklni yopishi mumkin.
Buning uchun stroke metodidan oldin closePath metodini chaqirish kerak.
Bu metod shaklni yopishga harakat qiladi, boshlang'ich nuqtadan oxirgi nuqtaga to'g'ri chiziq chizadi. Agar shakl allaqachon yopilgan bo'lsa yoki oddiy nuqta bo'lsa, metod hech narsa qilmaydi.
Keling closePath dan foydalangan holda uchburchak chizamiz:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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 qadamni tashlab o'tamiz
ctx.closePath();
ctx.stroke();
Результат:
Shakllarni bo'yash
stroke metodining o'rniga fill metodidan foydalanish mumkin -
bunda shakl to'liq yopiq bo'lishi shart emas - u shunday ham bo'yaladi:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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 qadamni tashlab o'tamiz
//ctx.closePath(); - va buni ham
ctx.fill();
Результат: