globalCompositeOperation

设置多个图形的混合模式,这个属性设定了在画新图形时采用的遮盖(图像合成)策略,其值是一个标识多种遮盖方式的字符串

  ctx.globalCompositeOperation = type;

测验

先看最简单例子,两个矩形有重合区域,此时将此属性设为ctx.globalCompositeOperation = 'xor'

左侧是未设定时样子,右侧是设定后样式.可见设定'xor'后,重合区域透明了(重合区灰色是css背景色)

source-over 这个是默认值,可见设置后与不设置是一样的.后续绘制的图形会盖住之前的.

source-in 只在重叠区域上绘制,其它位置透明.

先看左图,画布上有3矩形1圆,位于左右的红色和位于中间的蓝色.注意蓝色矩形与左右矩形和中间圆的重叠处

再看右图,设置了该值以后.只剩下重叠的区域了.

可以认为是最后绘制上的图形与之前绘制的所有图形重合处区域保留,其它区域则清空透明.

source-out 这个正好与source-in相反,只在没有内容的地方绘画,其它区域清空透明

对比上左图,下图所绘制内容正是蓝色矩形不与其它图形重合的区域.

source-atop 只在与现有画布内容重叠的地方绘制

下图可见,绘画区域(蓝色)与souce-in相同.但是不清空其它区域

destination-over 在现有的画布内容后面绘制新的图形

下图可见,绘画区域(蓝色)与souce-out相同.但是不清空其它区域

destination-in 现有的画布内容保持在新图形和现有画布内容重叠的位置,其他的都是透明的

下图可见,最后绘画的蓝色矩形没有了,画布上保留的是蓝色矩形与之前绘画内容重叠的区域

这个区域与"source-in"一样,可认为是最后绘画的蓝色矩形是一个选定区域,但不会画出来

destination-out 现在画布内容保持与新图形不重叠的位置

下图可见,其效果是"destination-in"反向选择之后的结果.

可以认为是最后绘画的蓝色矩形是一个橡皮擦,擦除的范围是画布现有图形与它重合的区域

destination-atop 现有的画布只保留与新图形重叠的部分

下图可见,保留的是最后绘制的蓝色矩形范围,其中与原有内容重叠的区域,显示的是原内容,不重叠的区域显示的是蓝色

可认为是原始内容盖住了蓝色矩形区域

lighter 两个重叠图形的颜色是通过颜色值相加来确定的

经典的三原色合成图,看重叠部分的颜色,是由组成重叠的原颜色合成

copy 保留最后路径内的内容

看左图,画了很多东西,最后一个画的是红色圆.再看右图,画的东西一样多,但是加了copy属性,结果只剩下最后画的红色圆了

这说明copy属性,就像是从其它地方复制一份内容,并且会清空画布上其它内容

multiply 将顶层像素与底层相应像素相乘,结果是一幅更黑暗的图片

任然是三原色,看重叠区域的颜色.变黑色了,说明这个属性的将红绿蓝像素相乘的做法会加深颜色.具体怎么算的不研究了.

screen 像素被倒转,相乘,再倒转,结果是一幅更明亮的图片

任然是三原色,看重叠区域的颜色.变白色了,说明这个属性的将红绿蓝像素相乘的做法会减淡颜色.具体怎么算的不研究了.

overlay multiply和screen的结合,原本暗的地方更暗,原本亮的地方更亮

红灰表绿三种颜色,看重叠区域的颜色,是否如其所说.暗者愈暗,亮者愈亮.

darken 保留两个图层中最暗的像素

下图可见,重叠区域颜色深的保留了

lighten 保留两个图层中最亮的像素

下图可见,重叠区域颜色浅的保留了,这与"darken"正好相反

color-dodge 将底层除以顶层的反置

效果如下,算法未知

color-burn 将反置的底层除以顶层,然后将结果反过来

效果如下,算法未知

hard-light 屏幕相乘(A combination of multiply and screen)类似于叠加,但上下图层互换了

效果如下,算法未知

soft-light 用顶层减去底层或者相反来得到一个正值

效果如下,算法未知

difference 一个柔和版本的强光(hard-light).纯黑或纯白不会导致纯黑或纯白

效果如下,算法未知

exclusion 和difference相似,但对比度较低

效果如下,算法未知

hue 保留了底层的亮度(luma)和色度(chroma),同时采用了顶层的色调(hue)

效果如下,算法未知

saturation 保留底层的亮度(luma)和色调(hue),同时采用顶层的色度(chroma)

效果如下,算法未知

color 保留了底层的亮度(luma),同时采用了顶层的色调(hue)和色度(chroma)

效果如下,算法未知

luminosity 保持底层的色调(hue)和色度(chroma),同时采用顶层的亮度(luma)

效果如下,算法未知

应用

每个属性对应一种算法,在不了解算法意义时,很难明白为何出现这种效果,就难做好应用.这需要了解图形处理相关的知识