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
# dom-context-2d-lineto-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
lineTo

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见