Question

我正在使用＆＃34; source-in＆＃34;在画布上合成渐变蒙版，我想要为蒙版形状的拉伸设置动画。梯度。这是合成代码，一个名为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（），但我真的需要渐变填充来创建淡入淡出效果。

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

Answer 1

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

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

有关详细信息，请参阅ctx.save() at MDN

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

动画制作时画布消失了＃34; source-in＆＃34; globalCompositeOperation掩码

1 个答案: