了解CanvasRenderingContext2D.globalCompositeOperation

    简介

    剪裁,CanvasRenderingContext2D.globalCompositeOperation可以用来设置Canvas图形的混合模式。可以衍生很多其他效果,以及改变绘制图形的上下层叠关系。,例如遮罩

    语法

    context.globalCompositeOperation = type;

    其中type就是混合类型,具体参见下面的“详细”。

    详细

    source-over

    绘制图形的默认混合方式,直接在现有图形的上方绘制,纯视觉覆盖,实时效果如下。

    source-in

    仅在和原Canvas图形重叠的位置绘制新图形,否则处理为透明。如果重叠位置是半透明颜色,则也处理为半透明。此效果类似遮罩,新内容为显示层,原内容是遮罩层,遮罩层无论张什么样子,都不显示。

    source-out

    source-in相反,重叠的位置是透明的,不重叠的或者半透明的重叠区域反而显示新图形。同样,原内容无论性质如何,最终效果都不会出现。

    source-atop

    原内容也永远不会显示,仅在新内容与原内容重叠的位置进行类似遮罩的绘制,如果是没有重叠的位置,则原封不动显示。这个和source-in区别在于source-in就算与原内容不重叠,但source-atop会保留。

    destination-over

    destination-*系列和source-*系列的区别就是动作的主体是新内容还是原内容。source-*系列是新内容,而destination-*系列动作主体是元内容。例如这里的destination-over表示原内容在上方,也就是新内容在原内容的下方绘制。

    虽然Canvas中并没有类似CSS的z-index概念,但是我们还是可以借助destination-over来改变Canvas元素默认的层级关系。

    destination-in

    显示原内容和新内容重叠的部分。

    destination-out

    隐藏原内容和新内容重叠的部分。

    destination-atop

    原内容只显示和新内容重叠的部分,同时新内容在下方显示。

    lighter

    无论是哪种语言,哪种工具的混合模式,其实概念都类似的。如果这里的lighter等同于Adobe Photoshop中lighter color的话,则这个属性值可以理解为自然光混合效果。红绿蓝混合会成为白色。其色值混合原理如下,比较新内容和原内容颜色的所有通道值的总和,并显示更高值的颜色。例如,红色RGB(255,0,0)和蓝色RGB(0,0,255)进行混合,则最终颜色值是RGB(255,0,255),也就是紫色。实际取色发现还是和PS还是有些出入的,并不是纯紫色。因此,我这里的理解并不一定完全准确,仅供参考。

    copy

    只显示新内容。

    xor

    互相重叠的区域是透明的。

    multiply

    正片叠底。顶层的像素与底层的对应像素相乘。结果是一幅更黑暗的图画。

    screen

    滤色。像素反转,相乘,然后再反转。最终得到更淡的图形(和multiply相反)。

    overlay

    叠加。multiplyscreen组合效果。基础图层上暗的部分更暗,亮的部分更亮。

    darken

    变暗。保留原内容和新内容中最暗的像素。

    lighten

    变亮。保留原内容和新内容中最亮的像素。

    color-dodge

    颜色减淡。底部图层色值除以顶部图层的反相色值。

    我从其他地方找了个计算公式:最终的颜色值是:底色+(底色*顶色)/(255-顶色)。仅供参考。

    color-burn

    颜色加深。底部图层的色值除以顶部图层色值,得到的结果再反相。

    由于color-dodgecolor-burn效果比较难理解,因此,平常几乎很少使用。

    hard-light

    强光。类似overlay,是multiplyscreen组合效果。只不过底层和顶层位置交换下。

    soft-light

    柔光。hard-light的柔和版本。纯黑色或白色不会生成为纯黑色或白色。

    difference

    差异。顶层色值减去底层色值的绝对值。如果都是白色,则最后是黑色,因为值为0;什么时候是白色呢,例如RGB(255,0,0)RGB(0,255,255),色值相减后绝对值是RGB(255,255,255)

    exclusion

    排除。类似difference,不过对比度较低。

    hue

    色调。最终的颜色保留底层的亮度和色度,同时采用顶层的色调。

    这里色度可以理解为饱和度。这里采用HSL色值表示颜色,H就是hue,S就是saturation,L就是luminosity。

    saturation

    饱和度。最终的颜色保留底层的亮度和色调,同时采用顶层的色度。

    color

    色值。最终的颜色保留底层的亮度,同时采用顶层的色调和色度。

    luminosity

    亮度。最终的颜色保留底层的色调和色度,同时采用顶层的亮度。

    案例

    案例1:文字镂空效果

    一个图片,然后文字部分是透明的。借助destination-out实现镂空效果,JS代码如下:

    // 绘制图片
    context'drawImage=img; 0; 0; 300; 200),
    // 改变混合方式
    context'globalCompositeOperation ( .destination-out.,
    // 绘制文本
    context'font ( .bold 120px SimHei; STHeiti.,
    context'fillText=.镂空.; 25; 140),

    实时效果如下:

    本效果使用xor也是可以的。

    案例2:给图片增加装饰效果

    假设底图和装饰图分别如下:

    底图 装饰图

    我们使用screen模式进行混合,结果实时效果如下:

    相关JS代码如下,假设图片都已经完全加载,且imgBase表示底图DOM元素对象,imgScreen表示装饰图DOM元素对象:

    // 绘制底图
    context'drawImage=imgBase; 0; 0; 300; 200),
    // 设置混合模式为滤色
    context'globalCompositeOperation ( .screen.,
    // 绘制装饰图
    context'drawImage=imgScreen; 0; 0; 300; 200),

    其他

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2019-10-18 01:44:04