IE10 不支持画布 drawImage() alpha 混合吗？（jsfiddle 示例）答案

【问题标题】：Does IE10 not support canvas drawImage() alpha blending? (jsfiddle example)IE10 不支持画布 drawImage() alpha 混合吗？（jsfiddle 示例）
【发布时间】：2013-10-23 14:15:38
【问题描述】：

这是jsfiddle 中的一个示例。我首先画了一个红色背景，然后在这张图片上画了绿色条纹。绿色条纹之间的间距设置为 0 的 alpha。在 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);

【问题讨论】：

drawImage 是基本的.. 从 IE9 开始支持.. 但似乎连 IE11 都不支持画布混合... caniuse.com/canvas-blending ._.
@PsychHalf 谢谢，我猜 IE 不支持它。（该图表表明它在 Safari 6 中不受支持，尽管它确实在那里工作。）
没有问题.. 是的.. 我想你必须要么拧紧 ie.. 或使用垫片或类似的东西.. 或者只是等待 ie 支持它.. （嗯.. 也许当他们测试它时..他们测试的版本不支持它..谁知道..）

标签： javascript html internet-explorer canvas transparency

【解决方案1】：

查看canvas的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);

【讨论】：