HTML reference manual

HTML tag大全

HTML canvas globalCompositeOperation property

The globalCompositeOperation property sets the type of composite operation to be applied when drawing new shapes, where type is a string used to identify the composite or blending mode operation to be used.

HTML canvas Reference Manual

在线示例

Draw rectangles using different globalCompositeOperation values. The red rectangle is目标图像, the blue rectangle is源图像:

source-over

destination-over

JavaScript:

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas globalCompositeOperation属性使用-基础教程(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";　　　　
ctx.globalCompositeOperation="source"-over";
ctx.fillRect(50,50,75,50);　　　　
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";　　　　
ctx.globalCompositeOperation="destination"-over";
ctx.fillRect(180,50,75,50);　　　　
</script>
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome, and Safari support the globalCompositeOperation property.

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

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

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

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

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	之外显示目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	之外显示目标图像中显示源图像。目标图像之内的源图像部分会显示，目标图像是透明的。
source-in	之外显示目标图像只有源图像。目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	之外显示源图像上显示目标图像。
destination-atop	之外显示源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	之外显示源图像中显示目标图像。源图像之内的目标图像部分会被显示，源图像是透明的。
destination-in	之外显示源图像只有目标图像。源图像之外的目标图像部分会被显示，源图像是透明的。
copy	忽略源图像 + 目标图像。
显示	忽略源图像。目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

在线示例

所有 globalCompositeOperation 属性值：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML canvas globalCompositeOperation属性使用-基础教程(oldtoolbag.com)</title>
<style>
canvas
{
　　　　border:1px solid #d3d3d3;
　　　　margin-right:10px;
　　　　margin-bottom:20px;　　　　
}
</style>
</head>
<body>
<script>
var gco=new Array();
gco.push("source-atop");
gco.push("source-in");
gco.push("source-out");
gco.push("source-over");
gco.push("destination-atop");
gco.push("destination-in");
gco.push("destination-out");
gco.push("destination-over");
gco.push("lighter");
gco.push("copy");
gco.push("xor");
for (n=0;n<gco.length;n++)
{
　　　　document.write("<div id='p_"　+　n　+　"' style='float:left;'>"　+　gco[n]　+　:<br>");
　　　　var c=document.createElement("canvas");
　　　　c.width=120;
　　　　c.height=100;
　　　　document.getElementById("p_"　+　n).appendChild(c);
　　　　var ctx=c.getContext("2d");　　　　
　　　　ctx.fillStyle="blue";
　　　　ctx.fillRect(10,10,50,50);
　　　　ctx.globalCompositeOperation=gco[n];
　　　　ctx.beginPath();
　　　　ctx.fillStyle="red";
　　　　ctx.arc(50,50,30,0,2*Math.PI);
　　　　ctx.fill();
　　　　document.write("</div>　　　　
}
</script>
</body>
</html>

Test to see ‹/›

HTML canvas Reference Manual

HTML: <template> tag