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

Question

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

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

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

谢谢！

Answer 1

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

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

您可以查看http://jsfiddle.net/kZj6F/1/ 来查看它是否正常工作。

如果它们被添加到路径中并且路径未被清除，它也会与其他形状一起使用。