以下是jsfiddle中的示例。我首先绘制一个红色背景,然后在此图像的顶部绘制绿色条纹。绿色条纹之间的间隙设置为alpha为0.在IE以外的所有浏览器中,生成的图像如下所示:
然而,在IE中,它看起来像这样:
即使在alpha = 0的简单情况下,似乎也没有任何对混合的支持。有什么我想念的吗?我是否需要自己混合颜色以便在IE中使用它?谁能解释一下这里发生了什么?以下是jsfiddle example ...
的代码HTML:
<canvas id="myCanvas" width="100" height="100"></canvas>
JS:
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);
答案 0 :(得分:1)
查看画布的context.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);