0

这是jsfiddle中的一个示例。我首先画了一个红色背景，然后在这张图片上画了绿色条纹。绿色条纹之间的间隙设置为 0 的 alpha。在除 IE 之外的所有浏览器中，生成的图像如下所示：

在此处输入图像描述

然而，在 IE 中，它看起来像这样：

在此处输入图像描述

即使在 alpha=0 的简单情况下，似乎也不支持混合。有什么我想念的吗？我是否需要自己混合颜色才能在 IE 中进行这项工作？谁能解释这里发生了什么？这是来自jsfiddle 示例的代码...

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);
4

1 回答 1

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);
于 2013-10-23T16:52:59.617 回答