2

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

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

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

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

4

1 回答 1

2

在您的示例中，它的工作方式完全正确。看看这个直接取自规范

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

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

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

另一个例子是source-over，您会期望将透明度添加到彼此，同样使用destination-in，并且source-in由于形状的减法，透明度应该降低。

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

于 2013-08-09T15:59:35.010 回答