CanvasRenderingContext2D.lineTo()

CanvasRenderingContext2D.lineTo() - малює нову точку і з'єдює з останьою.

Синтаксис:

ctx.lineTo(x, y);

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - точка осі X.

y - точка осі Y.

Опис:

lineTo() метод об'єкту CanvasRenderingContext2D який додає нову точку в контурі і з'єднює її з останьою точкою прямою лінією на полотні canvas.

Щоб задати початкову точку контура використовуйте метод moveTo().

Зверніть увагу що спочатку задаються контури точок а потім контури малюються або замальовується методами stroke(), fill().

Необхідно створювати нові контури щоб контури не замикалися.

Приклад:

Ваш браузер не підтримує canvas.
var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.moveTo(10, 10); crt.lineTo(50, 50); crt.strokeStyle='red'; crt.stroke(); var canvas= document.getElementById("canvas"); crt = canvas.getContext("2d"); crt.moveTo(12, 20); crt.lineTo(90, 55); crt.lineTo(25,40); crt.fill();

Малюємо 3 лінія різного кольору:

Ваш браузер не підтримує canvas.
var canvas= document.getElementById("canvas2"); crt = canvas.getContext("2d"); crt.beginPath(); //створюємо новий контур crt.moveTo(10, 10); crt.lineTo(50, 10); crt.strokeStyle='red'; crt.stroke(); //обмальовуємо контур crt.beginPath(); //створюємо новий контур crt.moveTo(0, 30); crt.lineTo(90, 90); crt.strokeStyle='blue'; crt.stroke(); //обмальовуємо контур crt.beginPath(); //створюємо новий контур crt.moveTo(0, 90); crt.lineTo(190, 90); crt.strokeStyle='black'; crt.stroke(); //обмальовуємо контур