在画布中混合不同的图像

Question

我有一个画布，我绘制了许多不同的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中做同样的事情。

Answer 1

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

首先在临时画布上的图像顶部填充矩形（使用＆＃39; source-atop＆＃39;复合），然后将其乘以主画布。

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

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";

结果看起来像。

但如果有的话，我仍然愿意接受更好的表演解决方案。