我正在尝试使用HTML5和Canvas为我正在处理的应用程序实现对PNG图像的实时颜色更改。我已经研究了两种实现这一目标的方法，它们不需要改变每个像素，因为每帧的操作都太昂贵，但这两种方法都会产生不良后果。
方法1：将原始图像绘制到临时画布，将上下文的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的问题在于，任何半透明像素都会变暗，而不是保持光亮和透明。似乎方法2的方法在某些引擎中使用，如Cocos2dx HTML，但是当我自己尝试时，它总是使透明像素变暗。
我用于测试的示例图片是：http://i.imgur.com/esAt9Au.png
以下是方法和我的预期结果的说明。 http://i.stack.imgur.com/MWP8h.png
