CanvasRenderingContext2D: lineTo() 方法
Canvas 2D API 的一部分，CanvasRenderingContext2D 方法 lineTo() 通过连接子路径的最后一个点与指定的 (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 |
浏览器兼容性
加载中…