CanvasRenderingContext2D：lineTo() 方法
该 CanvasRenderingContext2D 方法 lineTo()，作为 Canvas 2D API 的一部分，通过将子路径的最后一个点连接到指定的 (x, y) 坐标，向当前子路径添加一条直线。
与其他修改当前路径的方法一样，此方法不会直接呈现任何内容。要将路径绘制到画布上，可以使用 fill() 或 stroke() 方法。
语法
js
lineTo(x, 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(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
结果
绘制连接线
每次调用 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();
结果
规范
| 规范 |
|---|
| HTML 标准 # dom-context-2d-lineto-dev |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。