我正在尝试将 alpha 与 HTML5 画布混合使用。虽然颜色看起来大致不错,但检查实际像素值context.getImageData()
显示与标准 Porter-Duff 模型的差异似乎太大而无法用 8 位算术的限制来解释。
这是摘要:
阅读空白画布 =>
R=G=B=A=0
。这有点奇怪。由于我未上漆的画布显示为纯白色,我会预料到R=G=B=255
的。当然,有了A=0
,R、G 和 B 无论如何都无关紧要。尽管如此,我不确定如何R=G=B=A=0
显示为纯白色。用 涂上它
R=200,G=B=0,A=0.75
。将结果读取为R=201,G=B=0,A=0.75
。A=0.75
似乎是正确的;波特-达夫想要A_final=.75+(.25*0)=.75
。G=B=0
也很好。但我相信 R 应该是R=(.75*200)+(0*(.75-1)*0)=150
. 显然150 != 201
。相反,他们似乎使用了Final_color=new_color
R、G 和 B的方程式。用 重新画一遍
R=100,G=200,B=0,A=0.2
。将结果读取为R=175,G=50,B=0,A=0.8
。同样,A 的计算似乎是正确的;.2+(1-.2)*.75=.8
. 然而,波特-达夫预测R=(.2*100)+(.75*(1-.2)*201)=(.2*100)+(.6*201)=141
。再一次,很明显141 != 175
。绿色同样不一致。然而,R 和 G 都可以用公式来解释Final_color=.25*new_color+.75*old_color
——不幸的是,这不是 Porter-Duff 混合所预测的。
其他一些注意事项:
- 为简单起见,我将上面的所有 alpha 值都显示在 [0,1] 范围内。当然,getImageData 实际上在 [0,255] 中返回它们。
我已经检查了规范,就画布应该做什么而言,它似乎同意我的看法。
我已经尝试过 Chrome V37 和 IE V11,结果基本相同。
用绘画
A=0
作品很好,用绘画也一样A=1
。我发现一篇2011 年的帖子抱怨类似问题,但认为这是浏览器错误。我很难相信这样一个明显的错误会在三年后仍然存在——在两个不同的浏览器中以相同的方式出现。
以下是我如何阅读的代码详细信息:
pixels=(context.getImageData (10,10,1,1)).data; console.log(pixels);
和写作:
context.beginPath();
context.arc (10,10, 10, 0, 2*Math.PI);
context.fillStyle = "rgba(200,0,0,.75)";
context.fill ();