在画布中混合不同的图像答案

【问题标题】：Blending different images in canvas在画布中混合不同的图像
【发布时间】：2014-10-23 15:40:42
【问题描述】：

我有一个画布，我在上面绘制了许多不同的 PNG 图像 - 例如，我们使用此图像

我想使用多重混合来绘制具有不同混合颜色的每个 PNG，并且只影响绘制图像的区域 - 炸弹而不是图像的边界矩形。

这是我想要的结果

我尝试通过执行此代码来做到这一点

context.drawImage(image, drawLocSize[0], drawLocSize[1], drawLocSize[2],     drawLocSize[3]);

context.fillStyle = wantedColor;
context.globalCompositeOperation = "multiply";
context.fillRect(drawLocSize[0], drawLocSize[1], drawLocSize[2], drawLocSize[3]);
context.globalCompositeOperation = "source-over";

正如预期的那样，我得到了这个结果。

也尝试绘制图像而不是fillrect，但效果不佳。

问题是我如何仅在图像区域而不是图像矩形上执行此操作。并且以这种方式，当炸弹彼此一个时，结果将是下部炸弹将由其颜色和上部炸弹颜色合成。这对我不利。

由于图像分配，颜色不同以及绘图中的许多变化，我不想重新处理之前的每张图像。

我在 WebGL 中也是这样做的，只需将片段颜色与片段着色器中的混合颜色相乘即可。我想在 Context2D 中做同样的事情。

【问题讨论】：

请向我们展示您的代码。
分享您的研究对每个人都有帮助。告诉我们您尝试了什么以及为什么它不能满足您的需求。这表明您已经花时间尝试帮助自己，它使我们免于重复明显的答案，最重要的是它可以帮助您获得更具体和相关的答案！另见how to ask
我已经更新了我的问题。
图片是否有透明背景？
是的，如上图所示（透明的是白色/灰色方格）

标签： javascript html canvas

【解决方案1】：

找到了解决方案。但它有 2 个绘图阶段。

首先在临时画布中的图像顶部填充一个矩形（使用'source-atop'合成），然后在主画布上相乘。

首先我正在创建一个画布并获取它的上下文一次。

this._tmpCanvas = document.createElement("canvas");
this._tmpCtx = this._tmpCanvas.getContext('2d');

然后在我的绘图周期中我正在这样做

ctx.drawImage(currPtData.image, drawLocSize[0], drawLocSize[1], drawLocSize[2], drawLocSize[3]);

this._tmpCanvas.width = drawLocSize[2];
this._tmpCanvas.height = drawLocSize[3];

this._tmpCtx.drawImage(currPtData.image, 0, 0, drawLocSize[2], drawLocSize[3]);
this._tmpCtx.globalCompositeOperation = 'source-atop';
this._tmpCtx.fillStyle = 'red';
this._tmpCtx.fillRect(0, 0, drawLocSize[2], drawLocSize[3]);

临时画布现在看起来像这样 - （它也保存了透明度）。现在我们在我们的主要上下文中乘以这个画布。

ctx.globalCompositeOperation = "multiply";
ctx.drawImage(this._tmpCanvas, drawLocSize[0], drawLocSize[1], drawLocSize[2], drawLocSize[3]);
// setting the composite back
ctx.globalCompositeOperation = "source-over";

结果看起来像这样。

但如果有的话，我仍然愿意寻求更好的性能解决方案。

【讨论】：