2

我正在尝试将 alpha 与 HTML5 画布混合使用。虽然颜色看起来大致不错，但检查实际像素值context.getImageData()显示与标准 Porter-Duff 模型的差异似乎太大而无法用 8 位算术的限制来解释。

这是摘要：

  1. 阅读空白画布 => R=G=B=A=0。这有点奇怪。由于我未上漆的画布显示为纯白色，我会预料到R=G=B=255的。当然，有了A=0，R、G 和 B 无论如何都无关紧要。尽管如此，我不确定如何R=G=B=A=0显示为纯白色。

  2. 用 涂上它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_colorR、G 和 B的方程式。

  3. 用 重新画一遍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 ();
4

0 回答 0