JavaScript орқали canvas воситасида чизиқлар чизиш
Оддий нарсадан бошлаймиз - чизиқ чизишдан. Бу қандай амалга оширилишини тушуниш учун, сизда қоғоз ва қалам бор деб тасаввур қилинг. Сиз ушбу қоғоз устида чизишингиз мумкин, ёки чизмай туриб, қаламни керакли нуқтага жойлаштиришингиз мумкин.
JavaScript ҳам худди шу тарзда ишлайди: унинг қалами (ёки чизиш учун қалам) бор,
уни керакли жойга moveTo усули ёрдамида жойлаштиришингиз мумкин,
чизиш учун эса lineTo усулидан фойдаланишингиз мумкин.
Иккала усул ҳам параметр сифатида қалам учи силжитиладиган нуқтани қабул қилади -
биринчи параметр горизонтал бўйича координата, иккинчиси эса вертикал бўйича координатадир.
Координаталар бошланиши - 0, 0 нуқтаси - элементнинг чап юкори бурчагидир.
Қалам керакли нуқтага жойлашганда - moveTo усули фақат жойлаштиради,
lineTo эса жойлаштирув jarayonida қаламнинг жорий жойлашган нуқтасидан
у жойлашадиган нуқтагача бўлган чизиқни чизади.
Аммо, юқорида келтирилган кодни ишга туширсангиз - ҳеч нарса бўлмайди:
яна иккита буйруқни ёзиш зарур: биринчи beginPath буйруғи чизиқ чизиш
бошланишидан олдин кўрсатилиши керак, иккинчи stroke буйруғи эса
чизиқ чизилиши учун барча moveTo ва lineTo комбинацияларидан кейин
чақирилиши керак.
Шундай қилиб, чизиқ чизиш учун ишлайдиган кодни ѕзамиз:
Чизиқ чизайлик
<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();
:
Чимчиқ чизáйлик
<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();
:
Учбурчак чизайлик
<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();
:
Квадрат чизайлик
<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();
:
Шаклларни ёпиш
Ёпиқ шаклни чизиш учун барча чизиқларни қилиш шарт эмас -
охирги чизиқ автоматик равишда чизилиб, шаклни ёпиши мумкин.
Бунинг учун stroke усулидан олдин closePath усулини
чақириш керак.
Ушбу усул шаклни ёпишга уринади, охирги нуқтадан бошланғич нуқтага тўғри чизиқ чизади. Агар шакл аллақачон ёпилган бўлса ёки фақат нуқтадан иборат бўлса, усул ҳеч нарса қилмайди.
Келинг, closePath дан фойдаланиб, учбурчак чизайлик:
<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); - ушбу қадамни tashlab qoʻyamiz
ctx.closePath();
ctx.stroke();
:
Шаклларни бўёш
stroke усули ўрнига fill усулидан фойдаланиш мумкин -
бунда шакл тўлиқ ёпиқ бўлиши шарт эмас - у ҳар ҳолда бўялади:
<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); - ушбу қадамни tashlab qoʻyamiz
//ctx.closePath(); - ва буни ҳам
ctx.fill();
:
