画布 globalCompositeOperation 无法正常工作

Question

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

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

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

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

Answer 1

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

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

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

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

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

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