globalCompositeOperation 属性

使用不同的 globalCompositeOperation 值绘制矩形。蓝色矩形是目标图像。红色矩形是源图像

定义和用法

globalCompositeOperation属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。

•  源图像 = 您打算放置到画布上的绘图。
•  目标图像 = 您已经放置在画布上的绘图

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);

ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

属性值

值	描述
source-over	默认。在先绘制的图形上显示后绘制的图形。相交部分由后绘制的图形填充(颜色,渐变,纹理)覆盖
source-atop	在先绘制的图形顶部显示后绘制的图形。后绘制的图形位于先绘制的图形之外的部分是不可见的。
source-in	在先绘制的图形中显示后绘制的图形。只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明。
source-out	在先绘制的图形之外后绘制的图形。只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明。
destination-over	在后绘制的图形上方显示先绘制的图形, 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖.
destination-atop	在后绘制的图形顶部显示先绘制的图形。源图像之外的目标图像部分不会被显示。
destination-in	在后绘制的图形中显示先绘制的图形。只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明
destination-out	在后绘制的图形外显示先绘制的图形。只有后绘制的图形外的目标图像部分会被显示，源图像是透明的。
lighter	相交部分由根据先后图形填充来增加亮度。
copy	显示后绘制的图形。只绘制后绘制图形。
xor	相交部分透明。