Canvas GlobalComposite操作无法正常工作

我已经将这个来自MDN的演示放入JSFIDLE，并使颜色50%透明。

现在，根据苹果公司的说法，中的源图像应该“在源图像和目标图像都不透明的地方显示源图像。在源图像和目标图像都半透明的地方显示混合。在源图像或目标图像透明的地方显示透明。”

因此，当您查看问题的显示方式时，您可以看到问题。它是一种非常浅的粉红色，根本不是紫色。有人能解释一下为什么广场上的蓝色没有在这里混合？为什么它真的变轻了

补充：

---

我刚刚注意到，一个明显得多的例子。xor明显显示为紫色，但根据官方规范：“源映像和目标映像的独占或”。xor应该没有显示任何内容！它没有提到不透明度应该影响这些规则。

它在您的示例中应该如何工作。请看直接取自

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

在源图像和目标图像都不透明的位置显示源图像。在其他地方显示透明度

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

另一个例子是

source over

，您希望透明胶片相互添加，同样，使用

中的
目的地和
中的
源，由于形状的减少，透明度应该降低

感谢@simonsarris找到这颗宝石
，但实际上它绘制的宝石比源图像要轻。如果您查看左侧示例上方的源，则在alpha=0.5时为红色。红色的源，看起来在alpha=0.25左右，我还没有设置。我想知道Alpha是否被放大了，但我在网上找不到任何地方可以描述这种行为。我想这是因为从目标透明度中减去了它的透明度。经过快速测试，即使使用全局alpha集，其透明度也只有原来的一半，对吗？我真不敢相信，竟然没有这方面的文件。谢谢你的想法，我可能会悬赏来提高意识，看看别人怎么说。这是正确的。只有源映像应该存在，并且只有目标映像存在的地方才应该存在。由于目标图像存在一半（介于零和完全透明之间），源图像被复制一半，导致50%不透明的圆变成红色圆的25%不透明（或75%透明）部分。具体请参见W3规范的这一部分。阿尔法通道在src中乘以：