html5-canvas - 创建淡入效果

Question

我正在尝试使用画布元素创建幻灯片，效果很好。单击下一步，您将看到另一张图片。我想在显示下一张图片时添加一个从左到右的淡入淡出效果，但我不知道该怎么做。我尝试过的所有事情都没有奏效。

任何想法如何解决这个问题？

Answer 1

看globalAlpha方法。通过更改此值（介于 0 和 1 之间），您可以更改画布上下文的 alpha 值：

ctx.globalAlpha = 0.5; // half faded

使用变量来增加/减少每个循环的值，您可以创建淡入/淡出效果。