画布 globalCompositeOperation 无法正常工作

Posted 2023-03-23

【中文标题】画布 globalCompositeOperation 无法正常工作

【英文标题】：Canvas globalCompositeOperation is not working correctly

【发布时间】：2013-08-11 14:39:38

【问题描述】：

我已经把这个来自 MDN 的演示，https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html 放到一个 jsFiddle 中，并使颜色 50% 透明。 http://jsfiddle.net/eGAvb/

现在，根据 Apple 的说法，source-in 应该“在源图像和目标图像都是不透明的地方显示源图像。在源图像和目标图像都是半透明的地方显示混合。在源图像和目标图像的任何地方显示透明度。目的地是透明的。”

因此，当您查看它的显示方式时，您会发现问题。它是一种非常浅的粉红色，根本不是紫色。请有人能解释一下为什么广场上的蓝色都没有融合到这里吗？为什么它实际上变轻了？

补充： 我刚刚真正注意到，一个更引人注目的明显例子。当根据官方规范：“源图像和目标图像的异或”时，xor 清楚地显示紫色，它应该什么都不显示！它没有提到不透明度会影响这些规则。

【参考方案1】：

它在您的示例中完全按照它应该的方式工作。看看这个直接取自 the spec

源图像 A 是正在渲染的形状或图像，目标图像 B 是位图的当前状态。

在源图像和目标图像都不透明的地方显示源图像。在别处显示透明度。

在该定义中仅会显示源图像。由于它绘制目标图像然后减去源图像，因此您会得到更轻的整体图像。

另一个例子是source-over，你会希望透明胶片相互添加，同样使用destination-in和source-in，由于形状相减，透明度应该降低。

感谢@simonsarris 找到这颗宝石The Porter Duff Compositing Operators

【讨论】：

但它实际上比源图像更轻。如果您查看左侧的源过度示例，则在 alpha=0.5 时为红色。红色的源看起来在 alpha=0.25 左右，我没有在任何地方设置。我想知道 alpha 是否已经成倍增加 - 但我在网上找不到任何描述这种行为的地方。

我想这是由于从目标透明度中减去了它的透明度。经过快速测试，即使使用全局 alpha 集 jsfiddle.net/loktar/eGAvb/7

，它也恰好是透明度的一半

很奇怪，对吧？我不敢相信那里没有这方面的文件。感谢您的想法，我实际上可能会为此提供赏金以提高认识并看看其他人要说什么。

这是正确的。只有源图像应该存在，并且只有目标存在的地方。由于目标半存在（介于两者之间，也就是完全透明），源图像被复制了一半，导致 50% 不透明的圆圈变成红色圆圈的 25% 不透明（或 75% 透明）的部分。跨度>

具体看W3规范的这一部分。 Alpha 通道在 src-in 中相乘：dev.w3.org/fxtf/compositing-1/…