使用HTML5画布在所有浏览器中无效的混合结果

Answer 1

哦，天哪。我想我们刚刚进入了暮光之城。我担心我没有答案，但我至少可以提供更多信息。你的预感是正确的，至少在这里有些东西。

我更喜欢一个非常简单的示例（因此不会出现任何类型的错误 - 我担心你可能会遇到0-255而不是0-1而不是看起来彻底的问题）而不是你的我掀起了一些微小的东西。我发现的并不令人愉快：

<canvas id="canvas1" width="128" height="128"></canvas>
<canvas id="canvas2" width="127" height="127"></canvas>

+

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');

var alpha = 2/255.0;

ctx.fillStyle = 'rgba(127, 0, 0, ' + alpha + ')';
ctx2.fillStyle = 'rgba(127, 0, 0, ' + alpha + ')'; // this is grey
//ctx2.fillStyle = 'rgba(171, 0, 0, ' + alpha + ')'; // this works

for (var i = 0; i < 32; i++) {
      ctx.fillRect(0,0,500,500);
      ctx2.fillRect(0,0,500,500);
}

产生这个：

在这里亲自看看：

http://jsfiddle.net/jjAMX/

似乎如果你的表面区域太小（不是fillRect区域，而是画布区域本身），那么绘图操作将是一个清洗。

在IE9和FF7中似乎工作正常。我将其作为bug提交给了Chromium。 （我们会看到他们说的话，但他们的典型M.O.到目前为止是忽略大多数错误报告，除非它们是安全问题）。

我建议你检查你的例子 - 我想你可能在某个地方有0-255到0-1的问题。我在这里的代码似乎只是花花公子，除了可能是预期的偏红色，但 是所有浏览器的一致结果颜色，但Chrome问题除外。

最后，Chrome可能会采取措施优化表面积小于128x128的画布，这样可以防止污染。

Answer 2

将globalCompositeOperation设置为"lighter"（将重叠像素值加在一起的操作，它不是许多浏览器的默认操作）会产生相同的颜色并导致ie9，chrome 14和最新的firefox极光：

Expected: [126.99999999999999, 0, 0, 63.51372549019608]
Result: [127, 0, 0, 64]

Expected: [126.99999999999999, 0, 0, 63.51372549019608]
Result: [127, 0, 0, 64]

http://jsfiddle.net/jMjFh/11/

编辑：您可以在这里了解不同的复合操作的含义：

https://developer.mozilla.org/en/Canvas_tutorial/Compositing#globalCompositeOperation

例如，当我需要在画布的某些部分进行淡入淡出动画时，"copy"对我很有用