绘制垂直线时，clearRect不会清除画布

Question

我遇到一个奇怪的边缘案例，在工作中使用画布构建一些东西。在绘制从画布的顶部到底部的垂直线时，clearRect不会清除画布。渲染其他东西时，clearRect工作正常。

我不确定我是否遗漏了一些明显的东西，如果这是故意的行为，还是浏览器错误（不太可能因为chrome，safari，firefox和opera上的行为相同）。 如果是故意行为，是否有人知道其背后的理由和/或可能指向某些文件？

我做了一个小的测试用例，清楚地显示了行为，只有组合clearRect / vertical行不清除画布： http://jsfiddle.net/kZj6F/

谢谢！

Answer 1

您的问题是缺少beginPath，导致后续行被添加到同一路径stroke绘制所有行。

如果使用clearRect选项切换到点并返回到行，则选择您可以看到添加到正在绘制的路径的最后arc。只需在ctx.beginPath();之前添加一个电话ctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height);，问题就解决了。

您可以查看http://jsfiddle.net/kZj6F/1/以查看其是否有效。

如果它们被添加到路径并且路径未被清除，它也将具有其他形状。