Question

所以我有一个基本的画布设置，其中精灵在画布上方稍微添加并落在页面上，如果它们的Y位置大于画布的高度，则在被移除之前。这不是一个令人印象深刻的创作。

一切正常，但我真正喜欢的是每个独特的精灵在页面向下移动时也淡出。从我所看到的情况来看，没有简单的方法可以解决这个问题。

修改画布上下文的全局alpha并不够好，因为这会立即影响整个画布（就我所见）。我想单独影响每个精灵 - 所以它以不透明度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）： / p>

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();
}

Javascript个人精灵在画布上淡出？

1 个答案: