Question

我最近在画布混合模式的各个方面都涉及到数TB的博学论文，甚至找到了像this one这样的漂亮测试页。

然而，我只能在逐个像素的基础上找到不同模式所做的最模糊的描述，包括在选择src / dest像素或组合src / dest值时使用alpha通道的方式。

善良的灵魂能否指引我找到可靠的来源？

Answer 1

HTML5 canvas 2d上下文的正式规范由WhatWG和World Wide Web Consortium发布。

WhatWG引用a separate spec作为复合操作值。

W3将其定义如下：

source-atop
    A atop B. Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere.
source-in
    A in B. Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere.
source-out
    A out B. Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere.
source-over (default)
    A over B. Display the source image wherever the source image is opaque. Display the destination image elsewhere.
destination-atop
    B atop A. Same as source-atop but using the destination image instead of the source image and vice versa.
destination-in
    B in A. Same as source-in but using the destination image instead of the source image and vice versa.
destination-out
    B out A. Same as source-out but using the destination image instead of the source image and vice versa.
destination-over
    B over A. Same as source-over but using the destination image instead of the source image and vice versa.
lighter
    A plus B. Display the sum of the source image and destination image, with color values approaching 255 (100%) as a limit.
copy
    A (B is ignored). Display the source image instead of the destination image.
xor
    A xor B. Exclusive OR of the source image and destination image.
vendorName-operationName
    Vendor-specific extensions to the list of composition operators should use this syntax.

HTML canvas globalCompositeOperation模式的规范在哪里？

1 个答案: