在运行图像和背景之间的混合代码时,我无法解决为什么不起作用。我用 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 = "/image/Yfi8y.jpg";
var images = new Image();
images.onload = starting;
images.src = "/image/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>
最佳答案
您面临的主要问题是设置 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 = "/image/Yfi8y.jpg";
var images = new Image();
images.onload = loadHandler;
images.src = "/image/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>
关于javascript - Canvas 混合不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41497932/