Цртање линии преку canvas во JavaScript
Да започнеме со едноставно - со цртање линии. За да разберете како се прави, замислете дека имате лист хартија и молив. Можете да цртате на тој лист, или може да не цртате, едноставно да го движите моливот до саканата точка.
На ист начин работи и 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();
:
