画布混合不起作用

Question

在运行用于混合图像和背景的代码时，我无法解决为什么不起作用。我正在使用画布混合进行此操作，因为它比 css3 背景混合模式具有更多的交叉浏览兼容性，但我存有渲染它的问题，正如您将在下面的 sn-p 上看到的图像根本没有混合...我是 javascript 的业余爱好者，所以我可能遗漏了一些东西。

		var canvas=document.getElementById("header_photo");
		var ctx=canvas.getContext("2d");
		var cw=canvas.width;
		var ch=canvas.height;
  		ctx.globalCompositeOperation = "source-over";

		var img = new Image();
		img.onload = start;
		img.src = "https://i.stack.imgur.com/Yfi8y.jpg";

		var images = new Image();
		images.onload = starting;
		images.src = "https://i.stack.imgur.com/Ut7Wk.jpg";

		function start(){

		  var c1=scaleIt(img,1);

		  canvas.width=c1.width/1;
		  canvas.height=c1.height/1;
		  ctx.drawImage(c1,0,0);
		  ctx.globalCompositeOperation = 'multiply';

		}

		function starting(){

		  var c1=scaleIt(images,1);

		  canvas.width=c1.width/1;
		  canvas.height=c1.height/1;
		  ctx.drawImage(c1,0,0);

		}

		function scaleIt(source,scaleFactor){
		  var c=document.createElement('canvas');
		  var ctx=c.getContext('2d');
		  var w=source.width*scaleFactor;
		  var h=source.height*scaleFactor;
		  c.width=w;
		  c.height=h;
		  ctx.drawImage(source,0,0,w,h);
		  ctx.globalCompositeOperation = 'source-out';
		  return(c);
		} 

html, body {
  height: 100%;
  overflow-x: hidden; }

header {
  width: 100%;
  height: 100%; }
  header #header_photo {
    width: 100%;
    height: auto;
    position: absolute;
    opacity: 1; }

<header>
  <canvas id="header_photo"></canvas>
</header>

Answer 1

您面临的主要问题是设置画布 width 或 height 属性确实会重置整个上下文的属性（包括 gCO，以及之前绘制的内容）。

另请注意，您执行此操作的方式并不能保证启动或启动的顺序。因此，您最终可能会得到不需要的结果。您应该创建一个仅在两个图像都加载后才会触发的启动函数。

var canvas = document.getElementById("header_photo");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
ctx.globalCompositeOperation = "source-over";

var img = new Image();
img.onload = loadHandler;
img.src = "https://i.stack.imgur.com/Yfi8y.jpg";

var images = new Image();
images.onload = loadHandler;
images.src = "https://i.stack.imgur.com/Ut7Wk.jpg";

var loaded = 0;
function loadHandler(){
   if(++loaded == 2){
      start();
     }
   }

function start() {
  var c1 = scaleIt(img, 1);
  var c2 = scaleIt(images, 1);
  canvas.width = c1.width / 1;
  canvas.height = c1.height / 1;
  ctx.drawImage(c1, 0, 0);
  ctx.globalCompositeOperation = 'multiply';
  // here don't resize the main canvas, but use drawImage sizing options
  ctx.drawImage(c2, 0, 0, c1.width, c1.height);
}


function scaleIt(source, scaleFactor) {
  var c = document.createElement('canvas');
  var ctx = c.getContext('2d');
  var w = source.width * scaleFactor;
  var h = source.height * scaleFactor;
  c.width = w;
  c.height = h;
  ctx.drawImage(source, 0, 0, w, h);
  ctx.globalCompositeOperation = 'source-out';
  return (c);
}

html,
body {
  height: 100%;
  overflow-x: hidden;
}
header {
  width: 100%;
  height: 100%;
}
header #header_photo {
  width: 100%;
  height: auto;
  position: absolute;
  opacity: 1;
}

<header>
  <canvas id="header_photo"></canvas>
</header>