为“源输入” globalCompositeOperation 蒙版设置动画时，画布消失

Posted 2023-03-23

【中文标题】为“源输入” globalCompositeOperation 蒙版设置动画时，画布消失

【英文标题】：Canvas disappears when animating "source-in" globalCompositeOperation mask

【发布时间】：2015-12-13 18:49:49

【问题描述】：

我在画布上使用“source-in”合成渐变蒙版，我想为蒙版形状和渐变的拉伸设置动画。这是合成代码，一个名为drawList的函数：

var r = ctx.createLinearGradient(1100, 0, 1200 + stretch,0);
r.addColorStop(0,"rgba(255, 255, 255, 1.0");
r.addColorStop(0.8,"rgba(255, 255, 255, 0.0");
ctx.fillStyle = r;
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(300, 0, 1200 + stretch, 1000);

stretch 从 0 开始，并在使用 requestAnimationFrame 的动画函数中增加，我已经验证了它在为简单的矩形甚至 ctx.clearRect(300, 0, 1200 + stretch, 1000) 设置动画时有效。动画函数在每次迭代时调用drawList 和drawList。

从drawList 加载列表文本时，会根据上面矩形的渐变填充淡化。我遇到的问题是，一旦调用动画函数，画布就会被擦除并且不会重绘列表。我会使用 ctx.clip()，但我确实需要渐变填充来创建淡入淡出效果。

有什么想法吗？这是画布的限制吗？

【问题讨论】：

听起来符合您的预期。在矩形之前绘制的所有内容都会消失，但是您应该看到渐变矩形。不要忘记在 rect 之后将 comp 设置回 source-over。或使用ctx.save() 和ctx.restore() 重置GPU 状态。

@Blindman67 save() & restore() 只是门票。谢啦。您能否提交一个答案，以便我将其标记为解决方案，您可以获得代表点数？

【参考方案1】：

在设置画布上下文状态时，例如 globalAlpha、globalCompositeOperation、clip 等...这些状态保持活动状态并可能影响其余的渲染。解决此问题的一种方法是在使用完所有状态后再次设置它们。这最终会产生大量额外的代码，因此 2Dcontext API 提供了两个方便的函数来控制状态。 ctx.save() 和 ctx.restore()

ctx.save() 将当前状态推入堆栈。 ctx.restore() 弹出最后保存的状态并将画布上下文设置为该状态。您可以嵌套保存，但请记住将每个保存与还原相匹配。

欲了解更多信息，请参阅ctx.save() at MDN

一句警告。如果您追求实时游戏和界面的高性能渲染，则应避免保存和恢复状态。状态更改可能是渲染时的停顿点，或者只是复制不需要的状态更改。恢复状态可能会强制 GPU 从 CPU 内存重新加载 ctx.createPattern() 在以前保存的状态下使用的位图，即使您不打算使用它。这可能会非常慢，并且会对帧速率产生重大影响，尤其是在您继续恢复到未使用的模式时。