Javascript IE10是否不支持canvas drawImage()alpha混合?(jsfiddle示例)
下面是一个例子。我先画一个红色的背景,然后在这张图片的顶部画绿色的条纹。绿色条纹之间的间距设置为alpha为0。在除IE以外的所有浏览器中,生成的图像如下所示: 然而,在IE中,它看起来是这样的: 即使在alpha=0的简单情况下,似乎也不支持混合。有什么我遗漏的吗?我需要自己混合颜色才能在IE中完成这项工作吗?有人能解释一下这里发生了什么吗?这是来自 HTML:Javascript IE10是否不支持canvas drawImage()alpha混合?(jsfiddle示例),javascript,html,internet-explorer,canvas,transparency,Javascript,Html,Internet Explorer,Canvas,Transparency,下面是一个例子。我先画一个红色的背景,然后在这张图片的顶部画绿色的条纹。绿色条纹之间的间距设置为alpha为0。在除IE以外的所有浏览器中,生成的图像如下所示: 然而,在IE中,它看起来是这样的: 即使在alpha=0的简单情况下,似乎也不支持混合。有什么我遗漏的吗?我需要自己混合颜色才能在IE中完成这项工作吗?有人能解释一下这里发生了什么吗?这是来自 HTML: JS: var finalCanvas、finalCanvasCtx、大小、drawCanvasCtx、drawImageD
JS:
var finalCanvas、finalCanvasCtx、大小、drawCanvasCtx、drawImageData、ctrV、ctrH、ctrVStep、ctrHStep、索引;
//最终画布
finalCanvas=document.getElementById(“myCanvas”);
finalCanvasCtx=finalCanvas.getContext(“2d”);
大小=finalCanvas.width;
//绘画画布
drawCanvas=document.createElement(“画布”);
drawCanvas.width=大小;
drawCanvas.height=大小;
drawCanvasCtx=drawCanvas.getContext(“2d”);
drawImageData=drawCanvasCtx.createImageData(大小,大小);
//画红色背景
对于(ctrV=0;ctrV
检查画布的上下文。globalCompositeOperation
合成有许多功能,但根据您的需要,它可以做到以下几点:
在现有图形下绘制新图形(新图形仅填充现有画布的透明区域)
IE9+支持它
以下是示例代码:
ctx.fillStyle="green";
for(var i=0;i<10;i++){
ctx.fillRect(0,i*20,canvas.width,10);
}
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="red";
ctx.fillRect(0,0,canvas.width,200);
ctx.fillStyle=“绿色”;
for(var i=0;idrawImage
是基本的..从IE9开始就支持..但似乎连IE11都不支持画布混合...。@PsychHalf谢谢,我想IE中不支持它。(该图表表明Safari 6不支持它,尽管它确实在那里工作。)没问题..是的..我想你要么拧紧ie..要么使用垫片或类似的东西..或者等待ie支持它的时候..(好吧..可能是他们测试它的时候..他们测试的版本中不支持它..谁知道..)
var finalCanvas, finalCanvasCtx, size, drawCanvas, drawCanvasCtx, drawImageData, ctrV, ctrH, ctrVStep, ctrHStep, index;
// final canvas
finalCanvas = document.getElementById("myCanvas");
finalCanvasCtx = finalCanvas.getContext("2d");
size = finalCanvas.width;
// drawing canvas
drawCanvas = document.createElement("canvas");
drawCanvas.width = size;
drawCanvas.height = size;
drawCanvasCtx = drawCanvas.getContext("2d");
drawImageData = drawCanvasCtx.createImageData(size, size);
// draw red background
for (ctrV = 0; ctrV < size; ctrV++) {
for (ctrH = 0; ctrH < size; ctrH++) {
var index = ((ctrV * size) + ctrH) * 4;
drawImageData.data[index] = 255;
drawImageData.data[index+1] = 0;
drawImageData.data[index+2] = 0;
drawImageData.data[index+3] = 255;
}
}
// paint red background to final canvas
drawCanvasCtx.putImageData(drawImageData, 0, 0);
finalCanvasCtx.drawImage(drawCanvas, 0, 0);
// draw green overlay
for (ctrV = 0; ctrV < size; ctrV++) {
for (ctrH = 0; ctrH < size; ctrH++) {
ctrVStep = Math.round(ctrV / 10);
ctrHStep = Math.round(ctrH / 10);
index = ((ctrV * size) + ctrH) * 4;
drawImageData.data[index] = 0;
drawImageData.data[index+1] = 255;
drawImageData.data[index+2] = 0;
if ((ctrVStep % 2) == 0) {
drawImageData.data[index+3] = 255;
} else {
drawImageData.data[index+3] = 0;
}
}
}
// draw green overlay to final canvas
drawCanvasCtx.putImageData(drawImageData, 0, 0);
finalCanvasCtx.drawImage(drawCanvas, 0, 0);
ctx.fillStyle="green";
for(var i=0;i<10;i++){
ctx.fillRect(0,i*20,canvas.width,10);
}
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="red";
ctx.fillRect(0,0,canvas.width,200);