Метод Canvas lineTo()

Руководство по Canvas

Определение и использование

lineTo() метод для добавления новой точки и создания линии от этой точки к последней указанной точке на канвасе (этот метод не создает линию).

Совет:Используйте stroke() Метод рисует точное路径 на канвасе.

Пример

Пример 1

Начните путь, переместитесь в точку 0,0. Создайте линию до точки 300,150:

Ваш браузер не поддерживает тег canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Попробуйте сами

Совет:Более примеров предоставлено в нижней части страницы.

Синтаксис

context.lineTo(x,y);

Значение параметра

Параметр Описание
x X-координата целевой точки пути.
y Y-координата целевой точки пути.

Более примеров

Пример 2

Нарисуйте путь,形状类似于字母 L：

Ваш браузер не поддерживает тег canvas HTML5.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

Попробуйте сами

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство по Canvas