canvas path画一条直线

可以使用 moveTo() 方法和 lineTo() 方法来绘制一条直线。 moveTo() 方法用于将路径移动到指定的点，而 lineTo() 方法用于从当前点绘制一条直线到指定的点。

以下是一个绘制一条直线的示例代码：

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

ctx.beginPath();
ctx.moveTo(50, 50); // 将路径移动到起始点 (50, 50)
ctx.lineTo(200, 50); // 绘制一条直线到点 (200, 50)
ctx.stroke(); // 绘制路径

在上述代码中，我们首先获取到一个 canvas 元素，并使用 getContext("2d") 获取 2D 渲染上下文。然后，我们调用 beginPath() 方法开始创建新路径。接下来，使用 moveTo(50, 50) 将路径移动到起始点 (50, 50)。最后，使用 lineTo(200, 50) 绘制一条直线到点 (200, 50)。最后，调用 stroke() 方法绘制路径。

注意：在绘制路径之前，需要调用 beginPath() 方法开始创建新路径。这是因为 Canvas 上下文会保留之前绘制的路径，如果不调用 beginPath() 方法，那么新的绘制操作将会基于之前的路径进行绘制