我正在尝试使用 HTML5 和 Canvas 为我一直在开发的应用程序实现对 PNG 图像的实时颜色更改。我已经研究了两种不需要更改每个像素的方法来实现这一点，因为这对于每帧都进行的操作太昂贵了，但是这两种方法都会产生不良后果。
方法一：将原图绘制到临时画布上，将上下文的globalCompositeOperation设置为“source-in”，然后在临时画布上（在图像上方）绘制一个所需颜色的填充矩形，然后返回新着色的用于主项目的画布/图像。这种方法的源代码可以在答案#2 中找到：stackoverflow.com/questions/16228048/replace-a-specific-color-by-another-in-an-image-sprite-in-a-html5-canvas。
方法 1 的问题是，源图像的灰度或更暗的分量都不会继续，只有 alpha 分量和新颜色。因此，如果我在同一个位置重复绘制着色图像，即使原件具有一些应始终保持较暗阴影的纹理组件，它最终仍将是纯色。它适用于只需要单一颜色且没有纹理的图像。
方法2：将原始图像分成RGB和黑色/透明分量，并将每个分量存储为单独的图像。然后，使用“变亮”模式将每个组件绘制在彼此的顶部。这在 www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/ 的代码片段中进行了深入解释。
方法 2 的问题在于，任何半透明像素都会变得更暗，而不是像应有的那样保持明亮和透明。似乎在 Cocos2dx HTML 等某些引擎中使用了方法 2 方法，但是当我自己尝试时，它总是使透明像素变暗。
我用于测试的示例图像是：http: //i.imgur.com/esAt9Au.png
这是方法的说明和我的预期结果。http://i.stack.imgur.com/MWP8h.png
