什么时候.clearRect（）之后需要.stroke（）？

Question

我的图表代码中有几个地方.clearRect()没有任何效果，除非我在下一行调用.stroke()。起初我以为我忘了在某个地方关闭一些路径，但我仔细检查了情况并非如此。

对于此行为可能是一个合理的解释，还是对规范要求的.stroke()的调用？

Answer 1

如果没有代码来查看您实际在做什么，很难说出现了什么问题。

但不，笔画不是必需的，与clearRect无关。

以下是一些需要考虑的一般性要点：

• stroke()只会栅格化 现有路径的大纲。如果没有路径就没有任何东西可以冲击。
• clearRect()不适用于路径，只适用于位图本身。它与stroke()或任何其他路径操作无关。清除位图不会清除路径。
• 通过调用beginPath()清除（重置）路径，但不清除位图中的任何内容
• closePath()仅在您想要将第一个点与最后一个点连接（结束循环）时才需要，并且必须在使用stroke()对路径进行栅格化之前调用才能生效（{{1}另一方面，隐式和临时关闭你的路径，因为它无法填充开放的路径 - 这只适用于fill()，只是提到它。）
• 清除画布意味着要清除的区域中的所有像素都设置为黑色并且完全透明。
• clip()受到转化的影响。

如果你调用clearRect（）并且没有重置路径（使用beginPath）然后调用笔划，你将光栅化路径上存在的内容。

如果您打算为somwthing制作动画，那么您可以考虑以下例程：

1. 清除画布（clearRect()）
2. 清除路径（clearRect()）
3. 使用当前坐标（弧线，直线，矩形等）定义路径
4. 栅格化路径（beginPath()或stroke()）
5. 根据您的更新频率，使用fill()或requestAnimationFrame / setTimeout进行循环播放。