在.clearRect()之后什么时候需要.stroke()？

Question

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

对此行为的逻辑解释是什么，或者规范要求调用.stroke()？

Answer 1

如果没有代码来查看您实际在做什么，就很难判断出哪里出了问题。

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

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

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

如果调用clearRect()而不重置路径(使用beginPath)，然后调用笔划，则将栅格化路径上存在的内容。

如果你打算让一些东西动起来，那么你可以考虑以下例程：

1. 清除画布（clearRect()）
2. 清除路径（beginPath()）
3. 使用当前坐标（圆弧、直线、矩形等）定义路径
4. 光栅化路径（stroke()或fill()）
5. 根据更新频率，使用requestAnimationFramerequestAnimationFrame或setTimeout/setInterval循环。