0

我在画布上使用“源输入”合成渐变蒙版，我想为蒙版形状和渐变的拉伸设置动画。这是合成代码，一个名为 的函数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()，但我确实需要渐变填充来创建淡入淡出效果。

有任何想法吗？这是画布的限制吗？

4

1 回答 1

0

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

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

有关更多信息，请参阅MDN 上的 ctx.save()

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

于 2015-09-18T01:11:27.663 回答