了解CanvasRenderingContext2D.globalCompositeOperation

    简介

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

    语法

    context.globalCompositeOperation = type;

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

    详细

    source-over

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

    source-in

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

    source-out

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

    source-atop

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

    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

    叠加。multiply和screen组合效果。基础图层上暗的部分更暗，亮的部分更亮。

    darken

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

    lighten

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

    color-dodge

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

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

    color-burn

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

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

    hard-light

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

    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

     返回顶部