Canvas Path: 使用 moveTo() 和 lineTo() 绘制直线

"Canvas Path: 使用 moveTo() 和 lineTo() 绘制直线"\n\n使用 moveTo() 方法和 lineTo() 方法可以绘制一条直线。moveTo() 方法用于将路径移动到指定的点，而 lineTo() 方法用于从当前点绘制一条直线到指定的点。\n\n以下是一个绘制一条直线的示例代码：\n\njavascript\nconst canvas = document.getElementById(\"myCanvas\");\nconst ctx = canvas.getContext(\"2d\");\n\nctx.beginPath();\nctx.moveTo(50, 50); // 将路径移动到起始点 (50, 50)\nctx.lineTo(200, 50); // 绘制一条直线到点 (200, 50)\nctx.stroke(); // 绘制路径\n\n\n在上述代码中，我们首先获取到一个 canvas 元素，并使用 getContext(\"2d\") 获取 2D 渲染上下文。然后，我们调用 beginPath() 方法开始创建新路径。接下来，使用 moveTo(50, 50) 将路径移动到起始点 (50, 50)。最后，使用 lineTo(200, 50) 绘制一条直线到点 (200, 50)。最后，调用 stroke() 方法绘制路径。\n\n注意：在绘制路径之前，需要调用 beginPath() 方法开始创建新路径。这是因为 Canvas 上下文会保留之前绘制的路径，如果不调用 beginPath() 方法，那么新的绘制操作将会基于之前的路径进行绘制。