Canvas 混合无效

Question

虽然运行是图像和背景混合的代码，但我无法解决为什么不起作用。我用 canvas 混合来做，因为它比 css3 background-blend-mode 有更多的跨浏览兼容性，但我存有渲染它的问题，正如你将在图片下方的片段中看到的根本没有融合...我是 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

您面临的主要问题是设置 canvas 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>

Canvas 混合无效

Canvas blending not working

javascript

html

css

canvas

blending