Manual de referencia HTML

Completo de etiquetas HTML

Propiedad globalCompositeOperation de canvas HTML

La propiedad globalCompositeOperation establece el tipo de operación de composición aplicada al dibujar nuevas formas, donde type es la cadena utilizada para identificar el tipo de operación de composición o mezcla que se utilizará.

Manual de referencia de canvas HTML

在线示例

Dibujado con diferentes valores de globalCompositeOperation. El rectángulo rojo es目标图像，El rectángulo azul es源图像:

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>
Su navegador no admite HTML5　etiqueta canvas.
</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>

Prueba y observa ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten la propiedad globalCompositeOperation.

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

定义和用法

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

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

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

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

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	在源图像上显示目标图像。
destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
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>

Prueba y observa ‹/›

Manual de referencia de canvas HTML

HTML: <template> etiqueta