javascript - clearRect 绘制垂直线时不清除 Canvas

Question

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

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

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

谢谢!

Answer 1

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

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

可以查看http://jsfiddle.net/kZj6F/1/看到它的工作。

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