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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了绘制垂直线时,clearRect不会清除画布相关的知识,希望对你有一定的参考价值。

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

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

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

谢谢!

答案

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

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

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

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

以上是关于绘制垂直线时,clearRect不会清除画布的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 clearRect 不在画布上绘制移动对象

clearRect 函数不清除画布

canvas 鼠标绘图

Canvas清除画布的3种方法

除非在Javascript中删除for循环,为什么interval函数不会执行

js中的canvas画图,clearrect清除画布之后,重绘页面空白,重绘不出来,但没报错,js方法正常执行。