画布混合不起作用

Question

在为图像和背景混合运行代码时，我无法解决为什么不能正常工作。我使用canvas混合处理它，因为它比css3 background-blend-mode具有更多的交叉浏览兼容性，但是我们在渲染它时遇到问题，因为您将在图片下方的代码片段中看到并没有混合。 。我是一个拥有javascript的业余爱好者，所以我可能会错过一些东西。

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

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

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

 
\t \t function start(){ 
 

 
\t \t var c1=scaleIt(img,1); 
 

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

 
\t \t } 
 

 
\t \t function starting(){ 
 

 
\t \t var c1=scaleIt(images,1); 
 

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

 
\t \t } 
 

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

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性能确实重置整个上下文的属性（包括贺卡业务，以及之前已经被它吸引了）。

还要注意，你这样做的方式并不能保证启动或启动的顺序会触发。所以你可能会得到不想要的结果。您应该创建一个仅在两个图像都已加载时才会触发的启动功能。

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>