HTML canvas globalCompositeOperation Propery

例

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

源过

目的地在

JavaScript的：

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);

试一试»

浏览器支持

Internet Explorer 9中，火狐，歌剧，铬，和Safari支持掌握globalCompositeOperation属性。

注：Internet Explorer 8和更早的版本，不支持<canvas>元素。

定义和用法

源（新的）图像的绘制到目标掌握globalCompositeOperation属性设置或返回（现有的）图像。

类=“notranslate”新增源图像=图纸您要放置到画布上。

destination image =那些已经放置在画布上的图纸。

默认值：	源过
JavaScript语法：	context.globalCompositeOperation="source-in";

属性值

值	描述	播放
source-over	默认。显示源图像在目标图像	播放 ”
source-atop	显示在目标图像的顶部的源图像。源图像的一部分是目标图像以外的未示出	播放 ”
source-in	显示到目标图像的源的图像。源图像是内部的目标图像的仅一部分被示出，并且目标图像为透明	播放 ”
source-out	显示源图像进行目标图像。源图像是外目标图像的仅一部分被示出，并且目标图像为透明	播放 ”
destination-over	显示在源图像的目标图像	播放 ”
destination-atop	显示在源图像的顶端的目标图像。目标图像的一部分即源图像以外未示	播放 ”
destination-in	显示在源图像的目标图像。即INSIDE 源图像的目标图像的仅一部分被示出，并且将源图像是透明的	播放 ”
destination-out	显示目的地形象出源图像。即外源图像的目标图像的仅一部分被示出，并且将源图像是透明的	播放 ”
lighter	显示源图像 + 目标图像	播放 ”
copy	显示源图像。目标图像将被忽略	播放 ”
xor	源图像是通过使用异或与目标图像合成	播放 ”

例

所有掌握globalCompositeOperation属性值：

源过来：

源之上：

源中：

源出：

目的地过来：

目的地之上：

目的地在：

目的地出来：

打火机：

复制：

XOR：

试一试»

<HTML画布参考

HTML 参考

HTML 标签

HTML canvas globalCompositeOperation Propery

例

浏览器支持

定义和用法

属性值

例