CanvasRenderingContext2D：lineTo() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D 接口的 lineTo() 方法将当前子路径的最后一个点与指定的 (x, y) 坐标用直线段相连，从而将一个直线段添加到当前子路径中。

和其他修改当前路径的方法一样，这个方法并不直接渲染任何内容。要将路径绘制到画布上，你可以使用 fill() 或 stroke() 方法。

语法

js
lineTo(x, y)

参数

x

直线终点的 x 轴坐标。

y

直线终点的 y 轴坐标。

返回值

无（undefined）。

示例

画一条直线

此示例使用 lineTo 方法绘制了一条直线段。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

线从 (30, 50) 处开始，并在 (150, 100) 处结束。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath(); // 开始一个新路径
ctx.moveTo(30, 50); // 将笔移动到 (30, 50) 处
ctx.lineTo(150, 100); // 画一条线到 (150, 100) 处
ctx.stroke(); // 渲染路径

结果

绘制相连的线条

每次调用 lineTo()（以及类似的方法）都会自动添加到当前子路径中，这意味着所有的线条都会一起被描边或填充。这个例子用一条连续的线条绘制了一个字母“M”。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();

结果

规范

Specification
HTML Standard
# dom-context-2d-lineto-dev

浏览器兼容性

BCD tables only load in the browser

参见