相关概念说明

canvas的context. globalCompositeOperation属性用于设置合成操作,利用合成操作可以绘制一些复制的图形。相关定义如下:

  • source:源图,你即将绘制的图形。
  • destination:目标图,你已经在画布上绘制的图形。

globalCompositeOperation有11个可取值,下面代码是一段模板,分别改变globalCompositeOperation的值来看看效果:

context.fillStyle = "blue";
context.fillRect(50, 50, 100, 100);
context.globalCompositeOperation = "source-over";
context.fillStyle = "green";
context.fillRect(100, 100, 100, 100);

这里我们把源图和目标图分别设置为蓝色矩形和绿色矩形。

source-over

globalCompositeOperation的默认值,源图和目标图都画出来,它们相交区域只画出源图,也就是在相交区域绘制新创建图形的像素,已经绘制图形被抹掉(实际上是像素替换,图片是像素的矩阵)。

context.globalCompositeOperation="source-over";

效果:

source-over

destination-over

和source-over相对的,源图和目标图都画出来,相交区域保留目标图形像素。

context.globalCompositeOperation="destination-over";

效果:

source-atop

在目标图上面显示源图像。源图像位于目标图像之外的部分不绘制。

context.globalCompositeOperation="source-atop";

效果;

souce_atop

destination-atop

和source-atop相反,destination-atop在源图像上面显示目标图像。源图像之外的目标图像部分不会被显示。

context.globalCompositeOperation="destination-atop";

效果:

destination-atop

source-in

在目标图中显示源图。只有目标图内的源图部分会显示,源图与目标图不相交区域都不绘制。

context.globalCompositeOperation="source-in";

效果:

source-in

destination-in

和source-in相对应,在源图中显示目标图。只有源图内的目标图部分会被显示,源图与目标图不相交区域都不绘制。

context.globalCompositeOperation="destination-in";

效果:

destination-in

source-out

在与目标图不重叠的区域上绘制源图,其他部分像素都抹掉。

context.globalCompositeOperation="source-out";

效果:

source-out

destination-out

在与源图不重叠的区域上保留目标。其他部分像素都抹掉。

context.globalCompositeOperation="destination-out";

效果:

destination-out

lighter

这个值与顺序无关,如果源与目标重叠,就将两者的颜色值相加。得到的颜色值的最大取值为255,结果就是"加亮"。

context.globalCompositeOperation="lighter";

效果:

lighter

copy

只绘制源图,目标图不绘制,相当于擦除画布,重绘。

context.globalCompositeOperation="copy";

效果:

canvas copy

xor

对源图和目标图的像素集进行异或运算,擦除相交区域像素。

context.globalCompositeOperation="xor";

效果:

xor

渝ICP备20006974号-2