Цртање линија преко 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();
:
