CanvasRenderingContext2D.lineTo()
CanvasRenderingContext2D.lineTo()
是 Canvas 2D API 使用直线连接子路径的终点到 x,y 坐标的方法(并不会真正地绘制)。
语法
void ctx.lineTo(x, y);
参数
x
-
直线终点的 x 轴坐标。
y
-
直线终点的 y 轴坐标。
示例
画一条直线
这是一段使用 lineTo
方法的简单的代码片段。使用 beginPath()
绘制路径的起始点,使用 moveTo()
移动画笔,使用 stroke()
方法真正地画线。
HTML
<canvas id="canvas"></canvas>
JavaScript
线从 (30, 50) 处开始,并在 (150, 100) 处结束。
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
结果
规范
Specification |
---|
HTML Standard # dom-context-2d-lineto-dev |
浏览器兼容性
BCD tables only load in the browser