Javascript 单个 Sprite 在 Canvas 上淡出？

Question

所以我有一个基本的 Canvas 设置，其中 Sprite 被添加到 Canvas 上方一点并落下页面，如果它们的 Y 位置大于 Canvas 的高度，则在被删除之前。这不是一个令人印象深刻的创作。

一切正常，但我真正想要的是每个独特的 Sprite 在页面向下移动时也淡出。据我所知，没有简单的方法可以解决这个问题。

修改 Canvas 上下文的全局 alpha 还不够好，因为这会同时影响整个 Canvas (据我所知)。我想单独影响每个 sprite - 所以它会以 255 的不透明度开始，然后逐渐降低到 0，同时它也会向下移动到页面。

更改图像数据似乎是一项相当繁重的任务，尤其是考虑到图像的位置总是在变化(好吧，至少是垂直方向)，而且页面上一次最多可以有 60 个图像。

我知道我可以(如果我真的想)创建和删除 HTML 图像标签并通过 CSS 修改每个图像的不透明度，但这似乎也不太实用，再次考虑到我可以在页面上有多达 60 个任何一次。

我有什么办法可以实现这一目标，即使它是上述技术之一，效率更高一点？

Answer 1

a) 如果你只绘制那些对象，你可以在任何绘制之前设置 globalAlpha，比如:

function drawSprite(x,y) {
   ctx.globalAlpha = 1 - (y/canvasHeight) ; 
   ctx.drawImage(mySprite, x, y);      
}

这样所有绘制都使用正确的 alpha。

(必须先定义var canvasHeight=canvas.height)

b) 如果您执行了一些其他操作并且您不确定下一个操作是否会设置 globalAlpha，只需在绘制后将其恢复为 1(此处所有其他操作都应该使用 1 的 alpha):

function drawSprite(x,y) {
   ctx.globalAlpha = 1 - (y/canvasHeight) ;
   ctx.drawImage(mySprite, x, y);      
   ctx.globalAlpha = 1 ;
}

c) 另一种方式可能是自己保存/恢复 globalAlpha :

function drawSprite(x,y) {
   var lastGlobalAlpha = ctx.globalAlpha ;
   ctx.globalAlpha = 1 - (y/canvasHeight) ;
   ctx.drawImage(mySprite, x, y);      
   ctx.globalAlpha = lastGlobalAlpha ;
}

这样你就可以确定 drawSprite 不会影响当前的 globalAlpha，无论它的值是什么。

d) 最后，您必须关注 ctx.save() 和 ctx.restore()，它们允许您执行不会影响其他绘制的本地更改。因为，在这里，你只改变了 globalAlpha，你最好使用 a), b) 或最好的 : c)，但我只写代码作为记录:

function drawSprite(x,y) {
   ctx.save();
   ctx.globalAlpha = 1 - (y/canvasHeight) ;
   ctx.drawImage(mySprite, x, y);      
   ctx.restore();
}