javascript - 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 背景是 mask 2。如何解决这个问题呢？谢谢。

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();

如果蒙版宽度和高度与 Canvas 相同，那么您将只看到英雄图像。

也许您只想将英雄图像设置为黑色，同时保持关卡图像？

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

如果您想要其他东西，您将需要多解释一下，或者提供一个示例图片来说明您想要什么和您得到什么。

在很多情况下，您无法在一张 Canvas 上完成所有合成。在这些情况下，您可以创建第二个屏幕外 Canvas

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

在离屏 Canvas 上进行合成，然后将该 Canvas 绘制在显示 Canvas 上

ctx.drawImage(offScrCan,0,0);