javascript - 使用过滤器在画布上绘制图像

Question

我正在画布 + js 上制作类似塞尔达的游戏，但我不知道如何（或者即使可以做到）将过滤器应用于精灵。

我绘制了一个场景，我有多个角色（敌人、NPC 和玩家），当玩家杀死敌人时，我正在尝试制作动画。在我用爆炸动画改变敌人精灵之前，我想让它们“倾斜”。我想改变敌人精灵的整体颜色，比如“敌人精灵 -> 红色敌人精灵 -> 敌人精灵 -> 红色敌人精灵 -> 爆炸”。

我的问题，我可以对使用画布 drawImage 绘制的图像应用颜色过滤器吗？将敌人绘制到画布场景中的代码非常简单：

ctx.drawImage(img, posX, posY, img.width, img.height);

而且我也尝试过这个（如this other question中所建议）：

ctx.globalAlpha = 0.62;
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = 'red';
ctx.fillRect(posX, posY, img.width, img.height);

但它将遮罩应用于矩形而不仅仅是精灵（在这张图片中，我将上面的代码应用于每个精灵，只是为了观察它是否有效）：

有什么建议或帮助吗？谢谢！！

标签： javascriptcanvas2d-games