JavaScript аркылуу canvas'те сызыктарды тартуу
Жөнөкөй нерседен баштайлы - сызыктарды тартуудан. Бул кантип иштешин түшүнүү үчүн, сизде кагаз жана карандаш бар деп элестетиңиз. Сиз бул кагазга тарта аласыз, же тартпай эле карандашты керектүү чекитке жылдыра аласыз.
JavaScript да ушул сыяктуу иштейт: анын карандашы (же тартуучу калеми) бар, керектүү
жерге сиз аны moveTo методу менен жылдыра аласыз,
ал эми тартуу үчүн - lineTo методу менен.
Эки метод те параметр катары, калемдин учу жылдырыла турган чекитти кабыл алат - биринчи параметри
горизонталь боюнча координата, ал эми экинчиси - тик боюнча.
Координаттардын башаты - 0,
0 чекити - элементтин жогорку сол бурчу.
Калем керектүү чекитке жылганда -
moveTo методу жөн эле жылдырат, ал эми
lineTo жылдыруу процессинде калемдин учтугунан аны жылдыра турган чекитке чейин сызык тартат.
Бирок, жогорудагы кодду иштетсек
- эч нерсе болбойт: дагы эки буйрук жазышыбыз керек: биринчи буйрук 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); - бул кадамды түшүрөбүз
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); - бул кадамды түшүрөбүз
//ctx.closePath(); - жана бул дагы
ctx.fill();
:
