如何清除画布，以便始终在（0,0）和鼠标坐标之间显示一条线？

Question

我开始通过创建一个简单的绘图程序来探索HTML canvas元素：

• 当我在画布上移动鼠标时，我希望在（0,0）和鼠标坐标之间绘制一条线。我只想在任何给定的时间渲染一行。
• 为了确保只显示一行，在鼠标移动时，我清除上下文并从（0,0）到鼠标（x，y）绘制一条新行。
• 上述内容与“自由形式”或“铅笔”绘图工具不同，而是“线条”工具的粗略形式。

在鼠标移动事件处理程序中，我首先执行此操作：

context.clearRect(0, 0, canvas.width, canvas.height);

然后执行此操作：

context.moveTo(0, 0);
context.lineTo(mousePos.x, mousePos.y);
context.stroke();

问题是，画布没有清除，之前绘制的所有行仍然显示。

完整代码在此处：https://jsfiddle.net/csenthiltech/7ozsnhoy/

我尝试在线阅读简单绘图程序的源代码，发现他们也采用了类似的方法。但我无法让它发挥作用。以下是我对此主题的一些问题：

• Draw on HTML5 Canvas using a mouse
• How do I hand draw on canvas with JavaScript?

我在这里缺少什么？

Answer 1

我找到了答案here

原因是如果你不调用context.beginPath（）＆amp; context.closePath（），stroke（）将绘制所有先前存储的命令。

context.beginPath();
context.moveTo(0, 0);
context.lineTo(mousePos.x, mousePos.y);
context.clearRect(0, 0, canvas.width, canvas.height);
context.stroke();

Jsfiddle here