我已将此演示从MDN https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html放入jsFiddle并使颜色变为50％透明。 http://jsfiddle.net/eGAvb/
现在，根据Apple的说法，source-in应该“在源图像和目标图像都不透明的地方显示源图像。在源和目标都是半透明的任何地方显示混合。无论在哪里显示透明度来源或目的地是透明的。“
因此，当您查看它的显示方式时，您会发现问题。它是一种非常浅的粉红色，根本不是紫色。请问有人可以解释为什么广场上没有任何蓝色混合在这里？为什么它实际上变轻了？
此外： 我实际上已经注意到了一个更明显的例子。根据官方规范：“源图像和目标图像的独占OR”，xor显然呈现紫色，它应该什么都不显示！它没有提到不透明度会影响这些规则。
答案 0 :(得分：2)
它的工作原理与你的例子完全一致。看一下直接来自 the spec
的内容源图像A是要渲染的形状或图像，目标图像B是位图的当前状态。
在源图像和目标图像都不透明的任何地方显示源图像。在其他地方显示透明度。
在该定义中仅将显示源图像。由于它绘制目标图像然后减去源图像，因此您可以获得更轻的整体图像。
另一个示例是source-over，您可以期望将透明胶片添加到彼此，同样使用destination-in和source-in，由于形状的减去，透明度应该降低
感谢@simonsarris找到这个宝石The Porter Duff Compositing Operators