画布globalCompositeOperation不能正常工作

Question

我已经把这个演示从MDN，composite.html到一个jsFiddle，并使颜色50%透明。http://jsfiddle.net/eGAvb/

现在，苹果认为，source-in应该“在源图像和目标图像都是不透明的地方显示源图像。在源图像和目标图像都是半透明的地方显示混合图像。在源图像或目标图像透明的地方显示透明。”

所以当你看到一个问题时，你可以看到它是如何显示的。这是一个很浅的粉红色，一点也不紫色。有人能解释一下为什么广场上的蓝色都没有混合在这里吗？为什么它真的变轻了？

补充:我刚刚注意到，这是一个非常明显的例子。xor是一个明显的紫色，当根据官方规范：“源图像和目的地图像的独家或或。”，它应该什么也不显示！它没有提到不透明应该影响这些规则。

Answer 1

在你的例子中，它的工作原理是完全正确的。看看这个直接取自规格的

源图像A是正在呈现的形状或图像，目标图像B是位图的当前状态。 在源图像和目标图像都不透明的地方显示源图像。在其他地方显示透明度。

在该定义中，将只显示源图像。由于它绘制目标图像，然后减去源图像，您将得到一个更轻的整体图像。

另一个例子是source-over，您将期望相互添加透明，同样地，使用destination-in和source-in，由于形状的减法，透明度应该降低。

谢谢@simonsarris找到这个宝石Porter Duff组合算子