Метод Canvas lineTo()
Определение и использование
lineTo()
метод для добавления новой точки и создания линии от этой точки к последней указанной точке на канвасе (этот метод не создает линию).
Совет:Используйте stroke() Метод рисует точное路径 на канвасе.
Пример
Пример 1
Начните путь, переместитесь в точку 0,0. Создайте линию до точки 300,150:
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:
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>.