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

Question

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

我不确定是否缺少明显的东西，如果这是故意行为或浏览器错误（不太可能，因为Chrome上的行为在Chrome，Safari，Firefox和Opera上是相同的）。 如果是故意行为，是否有人知道它背后的基本原理和/或可能指向某些文档？

我做了一个小测试的情况下，显示的行为显然，只有组合clearRect /垂直线不清除画布： 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/以查看它的效果。

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