Canvas 元素叠加到 canvas

Question

TL;DR 如何使带有图像的 canvas 元素与第二个 canvas 图像叠加。

我有两个 canvas 元素。第一个有 T 恤的图像。第二个有可以手动添加的图像。我想让第二个覆盖第一个canvas。

js:

var canvas = document.getElementById('first');
var context = canvas.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);

var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/raw-00.png';
image.onload = function() {
  context.save();
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  drawCustomLogo(context);
}

function drawCustomLogo(context) {
   var layerCanvas = document.getElementById('second');
   var layerContext = layerCanvas.getContext('2d');
   var image = new Image();
   image.src = 'http://neilhem.github.io/dressfor/images/forest/pattern.png';
   image.onload = function() {
      context.save();
      context.drawImage(image, 0, 0, 265, 265);
   }
   context.globalCompositeOperation = 'overlay';
   context.drawImage(layerCanvas, 100, 70);
}

我在http://codepen.io/neilhem/pen/JdGZKx

中做了一些例子

你可以看到叠加的图像更亮，如何让结果不那么亮？

Answer 1

您想要的是 globalCompositeOperation 属性中的 source-atop 类型。

另外，在你的代码中，你从不使用你的第二个 canvas 所以我删除了它

var canvas = document.getElementById('first');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, canvas.width, canvas.height);

var image = new Image();
image.src = 'http://neilhem.github.io/dressfor/images/raw-00.png';
image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  drawCustomLogo(context);
}

function drawCustomLogo(context) {
  var image = new Image();
  image.src = 'http://neilhem.github.io/dressfor/images/forest/pattern.png';
  image.onload = function() {
    context.save();
    context.globalCompositeOperation = "source-atop";
    context.drawImage(this, 0, 0);
  }
}

body {
  background-color: #000;
}

<canvas id="first" width="547" height="646"></canvas>

Ps : 你可能还想改变
context.fillStyle = '#FFF'; 至 context.fillStyle = 'rgba(0,0,0,0)';

Canvas 元素叠加到 canvas

Canvas element as overlay to canvas

html

canvas

html5-canvas