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.75A=0.75似乎是正确的;波特-达夫想要A_final=.75+(.25*0)=.75G=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