Javascript 使用HTML5画布将彩色遮罩覆盖应用于尊重透明度的图像

我正在使用Javascript创建一个街机游戏，它可以绘制2D画布上下文

为了模拟被拍摄的精灵的“痛苦”，我想让它们闪橙色

我目前使用

ctx.drawImage（）

将图像绘制到画布上

我希望使用Javascript，而不是创建更多的艺术品来应用“痛苦”效果。 我已经研究了

globalCompositeOperation

，但还没有找到解决方案

以下是在滚动背景图形上绘制到画布上的原始图像：

理论上，我想使用

fillRect（）

应用一个矩形橙色区域：

我所追求的效果是：

不是这个：

---

有人知道这是否可行吗？

请在精灵中加入您用来绘制和着色的代码，好吗？您的原始船舶图像也有这个陆地背景？？否则，在这种情况下，最简单的方法就是使用屏幕外的画布，在那里你只需要在船上进行混合。然后你只需要在主画布上画这个屏幕外的画布。谢谢。我就是这么做的。干杯