最新的Web开发教程
 

HTML canvas globalCompositeOperation Propery

<画布对象

例

绘制使用两种不同的globalCompositeOperation值的矩形。 红色矩形的destination images 。 蓝色矩形是source images ：

源过
目的地在
YourbrowserdoesnotsupporttheHTML5canvastag。

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);
试一试»

浏览器支持

在表中的数字规定，完全支持该财产浏览器版本。

属性
globalCompositeOperation 4 9 3.6 4 10.1

定义和用法

源如何掌握globalCompositeOperation属性设置或返回(new)图像被绘制到一个目的地(existing)图像。

源图像=附图您将要放置到画布上。

目标图像=那些已经放置在画布上的图。

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

属性值

值 描述 播放
source-over 默认。 显示在目标图像的源图像 播放 ”
source-atop 显示在目标图像的顶部的源图像 。 所述的部分source image是外部destination image中未示出 播放 ”
source-in 显示到目的地图像的源图像 。 所述的唯一的部分source image即内部的destination image被示出，并且destination image是透明的 播放 ”
source-out 显示源图像从目标图像 。 所述的唯一的部分source image是OUTSIDE的destination image被示出，并且destination image是透明的 播放 ”
destination-over 显示目标图像在源图像 播放 ”
destination-atop 显示在源图像上的目标图像 。 所述的部分destination image是外source image中未示出 播放 ”
destination-in 显示源图像 目标图像 。 所述的唯一的部分destination image即内部的source image被示出，并且source image是透明的 播放 ”
destination-out 显示目的地形象出来的源图像 。 所述的唯一的部分destination image即OUTSIDE的source image被示出，并且source image是透明的 播放 ”
lighter 显示源图像 + 目标图像 播放 ”
copy 显示源图像。 目标图像被忽略 播放 ”
xor 源图像是通过使用异或与目标图像相组合 播放 ”

例

所有掌握globalCompositeOperation属性值：

试一试»
<画布对象