clearRect在绘制垂直线时不会清除画布 [英] clearRect does not clear the canvas when drawing vertical lines

问题描述

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

I hit a weird edge case building something with canvas at work. clearRect does not clear the canvas when drawing vertical lines that go from the top to the bottom of the canvas. When rendering other stuff, clearRect works fine.

我不知道如果我缺少一些明显的东西，如果这是故意的行为或浏览器错误行为是相同的chrome，safari，firefox和mac上的歌剧）。
如果是有意的行为，有没有人知道它背后的理由和/或可能指向一些文档？

I'm not sure if I am missing something obvious, if this is intentional behavior, or a browser bug (unlikely since the behavior is identical in chrome, safari, firefox and opera on mac). If it is intentional behavior, does anybody know the rationale behind it and/or can perhaps point to some documentation?

我做了一个小测试用例，行为很清楚，只有clearRect /垂直线组合不清楚画布：
http://jsfiddle.net/kZj6F/

I made a small test case that shows the behavior clearly, only the combination clearRect/vertical lines does not clear the canvas: http://jsfiddle.net/kZj6F/

谢谢！

推荐答案

beginPath 导致后续行添加到 stroke 绘制所有行的同一路径。

Your issue is with a missing beginPath causing subsequent lines to be added to the same path that was stroke drawing all lines.

如果使用clearRect选项切换到点并回到行，则可以看到添加到绘制路径的最后 arc 。只需添加一个 ctx.beginPath（）; before ctx.moveTo（randomX + 0.5，0）;

If you switch to dots and back to lines with the clearRect option choose you can see the last arc added to the path being drawn too. Just add a call ctx.beginPath(); prior ctx.moveTo(randomX + 0.5, 0); ctx.lineTo(randomX + 0.5, canvas.height); and the problem is solved.

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

You can check http://jsfiddle.net/kZj6F/1/ to see it working.

Bwt它将与其他形状，如果他们被添加到路径和路径未清除。

Bwt it will with other shapes too if they got added to the path and the path was not cleared.

这篇关于clearRect在绘制垂直线时不会清除画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！