globalCompositeOperation影响到所有层？

Question

我有一个简单的代码，我想要创建的播放器面具。

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(level1, 0, 0);
ctx.save();
ctx.fillRect(0,0,mask.width,mask.height);
ctx.globalCompositeOperation="source-in";
ctx.drawImage(hero,0,0);
ctx.restore();

但globalCompositeOperation影响水平落后。它认为level1回溯是掩码二。如何解决这个问题呢？谢谢。

Answer 1

很难说你想要什么。

// clear the whole canvas
ctx.clearRect(0, 0, canvas.width, canvas.height); 
// draw image at top left covering part or all of the canvas
ctx.drawImage(level1, 0, 0);

ctx.save();
// fill part of all of the canvas including the drawn image with black
ctx.fillRect(0,0,mask.width,mask.height);

ctx.globalCompositeOperation="source-in";
//draw image where each pixel in the hero image get the hero colour RGB and the
// source alpha.
ctx.drawImage(hero,0,0);
ctx.restore();

如果面具的宽度和高度与画布相同，那么你只会看到英雄的形象。

也许你想在保持水平形象的同时，把英雄形象变成黑色？

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillRect(0,0,mask.width,mask.height);
ctx.globalCompositeOperation="destination-in"; 
ctx.drawImage(hero,0,0);
ctx.globalCompositeOperation = "source-over"; // reset default
ctx.drawImage(level1, 0, 0);

如果您想这样做，但是黑色英雄像素后面的level1图像

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillRect(0,0,mask.width,mask.height);
ctx.globalCompositeOperation="destination-in"; 
ctx.drawImage(hero,0,0);
ctx.globalCompositeOperation="destination-over"; 
ctx.drawImage(level1, 0, 0);
ctx.globalCompositeOperation = "source-over"; // reset default

如果你想要别的东西，你需要解释更多，或者给出一个你想要什么和你得到什么的例子。

在许多情况下，您不能在一个画布上完成所有的合成。在这种情况下，您可以创建另一个非屏幕画布。

var offScrCan = document.createElement("canvas");
offScrCan.width = canvas.width;
offScrCan.height = canvas.height;
var ctx1 = offScrCan.getContext("2d");

在屏幕外的画布上进行合成，然后在显示画布的顶部绘制该画布。

ctx.drawImage(offScrCan,0,0);