当动画“source-in”时，画布会消失.globalCompositeOperation面具

Canvas disappears when animating "source-in" globalCompositeOperation mask

本文关键字：布会 消失 globalCompositeOperation 面具 动画 source-in      更新时间：2023-09-26

我在画布上使用"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()，但是我真的需要渐变填充来创建渐变效果。

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

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

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

更多信息参见MDN

的ctx.save()

一个警告。如果你追求实时游戏和界面的高性能渲染，那么应该避免保存和恢复状态。状态更改可能是呈现时的一个停顿点，或者只是复制不需要的状态更改。恢复状态可能会强制GPU从CPU内存中重新加载ctx.createPattern()在先前保存的状态下使用的位图，即使您不打算使用它。这可能非常慢，并且对帧速率有很大的性能影响，特别是当您不断恢复到未使用的模式时。

相关文章：