在画布上如何使单个Javascript精灵淡出？

Question

在画布上如何使单个Javascript精灵淡出？

javascripthtmlimagecanvasfade

3

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

一切都很好，但我真正想要的是每个独特精灵在向下移动时也逐渐消失。从我所看到的情况来看，没有简单的方法可以做到这一点。

修改画布上下文的全局 alpha 值不够好，因为这会同时影响整个画布（至少我所看到的）。我想单独影响每个精灵 - 因此它将以 255 的不透明度开始，并随着向下移动而逐渐减少到 0。

修改图像数据似乎是一个相当繁重的任务，特别是考虑到图像的位置总是在变化（至少是垂直的），而且页面上最多可以有60个这样的元素。

我知道我可以（如果我真的想）创建和删除 HTML 图像标签，并通过 CSS 修改每个图像的不透明度，但这似乎也不是很实际，尤其是考虑到我可以在任何时间有多达60个元素。

有没有办法可以实现这一点，即使是对前述技术之一进行了更高效的改进？

- Llunavale

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GameAlchemist · Accepted Answer

a) 如果您只是绘制这些对象，您可以在任何绘制之前设置globalAlpha，例如：

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

这样可以确保所有绘制都具有正确的透明度。(在此之前，您需要定义变量canvasHeight = canvas.height)

如果您执行其他操作，并且不确定下一个操作是否会设置全局alpha，请在绘制后将其恢复为1（所有其他操作都应在此处使用alpha值为1）：

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