HTML canvas globalCompositeOperation 属性

示例

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

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 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>

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

浏览器支持

chrome edge firefox safari opera

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 globalCompositeOperation 属性。

定义和用法

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

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

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

默认值:	`source-over`
JavaScript syntax:	context.globalCompositeOperation="source-in";

属性值

值 Value	描述 Description
source-over	默认。在目标图像上显示源图像
source-atop	在目标图像顶部显示源图像。目标图像之外的源图像部分未显示
source-in	将源图像显示到目标图像。仅显示目标图像内部的源图像部分，并且目标图像是透明的
source-out	显示目标图像之外的源图像。仅显示目标图像之外的源图像部分，并且目标图像是透明的
destination-over	在源图像上显示目标图像
destination-atop	在源图像之上显示目标图像。未显示源图像之外的目标图像部分
destination-in	在源图像中显示目标图像。仅显示源图像内部的目标图像部分，并且源图像是透明的
destination-out	显示源图像中的目标图像。仅显示目标图像在源图像之外的部分，并且源图像是透明的
lighter	显示源图像+目标图像
copy	显示源图像。目标图像被忽略
xor	源图像与目标图像使用异或组合

更多示例

所有 globalCompositeOperation 属性值：

<style>
canvas {
  border: 1px solid #d3d3d3;
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>
<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");

var n;
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>

HTML 索引 (字母排序)

GitHub 上编辑此页 2022/05/09