画布（属性为globalBositeOperation，封面为bg）

Question

如何制作面具以使照片位于另一张照片的背景上？

我评论了该行，因为它无法正常工作http://jsfiddle.net/LZY5A/5

如果示例没有图片刷新页面

来自jsFiddle的代码：

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

var imageObj = new Image();
var imageObj2 = new Image();
var bg = new Image();
imageObj.src = 'http://codepo8.github.io/canvas-masking/centerblur.png';
imageObj2.src = 'http://codepo8.github.io/canvas-masking/red-panda.jpg';
bg.src = 'http://s5.goodfon.ru/image/391868-3318x2212.jpg';



setInterval(loop, 17);

function loop() {
  // ctx.drawImage(bg, 0, 0, 500,500); // It should be behind

  ctx.drawImage(imageObj, 100, 100, 100,100);
  ctx.globalCompositeOperation = 'source-atop';
  ctx.drawImage(imageObj2, 100, 100, 100,100);
}

Answer 1

您可以使用目标覆盖合成在您的淘汰效果背后绘制背景：

示例代码和演示：http://jsfiddle.net/m1erickson/Uyz7Y/

ctx.drawImage(imgs[0], 100, 100, 100,100);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(imgs[1], 100, 100, 100,100);
ctx.globalCompositeOperation="destination-over";
ctx.drawImage(imgs[2],0,0);
ctx.globalCompositeOperation="source-over";  // reset to default compositing

顺便说一句，你的循环是不必要的......