HTML Canvas 混合
globalCompositeOperation 属性
globalCompositeOperation 属性设置绘制新形状时应用的混合操作类型。在前面的章节中，新图形会相互叠加。我们可以使用 globalCompositeOperation 属性来决定如何处理新图形。
让我们来看一些例子！
"source-over" 值
"source-over" 值是默认值。它会将新形状绘制在现有内容之上。
示例
将 globalCompositeOperation 属性设置为 "source-over"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-over";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"source-out" 值
"source-out" 值仅在不与现有内容重叠的地方绘制新形状。
示例
将 globalCompositeOperation 属性设置为 "source-out"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "source-out";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"destination-over" 值
"destination-over" 值会将新形状绘制在现有内容后面。
示例
将 globalCompositeOperation 属性设置为 "destination-over"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-over";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"destination-atop" 值
"destination-atop" 值将保留与新形状重叠的现有内容。新形状绘制在现有内容后面。
示例
将 globalCompositeOperation 属性设置为 "destination-atop"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "destination-atop";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"lighter" 值
"lighter" 值会在两个形状重叠的地方产生更亮的颜色。
示例
将 globalCompositeOperation 属性设置为 "lighter"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"copy" 值
"copy" 值只会显示新形状。
示例
将 globalCompositeOperation 属性设置为 "copy"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "copy";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"xor" 值
"xor" 值会在两个形状重叠的地方使它们透明，其他地方正常绘制。
示例
将 globalCompositeOperation 属性设置为 "xor"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "xor";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"multiply" 值
"multiply" 值会产生更暗的图像。将顶层像素与底层像素相乘。
示例
将 globalCompositeOperation 属性设置为 "multiply"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "multiply";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"screen" 值
"screen" 值会产生更亮的图像。将像素反转，然后相乘，再反转（与 "multiply" 相反）。
示例
将 globalCompositeOperation 属性设置为 "screen"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "screen";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"darken" 值
"darken" 值会在两个形状重叠的地方产生更暗的颜色（保留两个图层的最暗像素）。
示例
将 globalCompositeOperation 属性设置为 "darken"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "darken";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"lighten" 值
"lighten" 值会在两个形状重叠的地方产生更亮的颜色（保留两个图层的最亮像素）。
示例
将 globalCompositeOperation 属性设置为 "lighten"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighten";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"hue" 值
"hue" 值采用顶层的色相，并保留底层的信息和饱和度。
示例
将 globalCompositeOperation 属性设置为 "hue"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "hue";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
"luminosity" 值
"luminosity" 值采用顶层的信息，并保留底层的色相和饱和度。
示例
将 globalCompositeOperation 属性设置为 "luminosity"。然后绘制两个重叠的矩形
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "luminosity";
// 绘制两个重叠的矩形
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(40, 40, 100, 100);
</script>
自己动手试一试 »
globalCompositeOperation 属性值
globalCompositeOperation 属性可以具有以下值
| 值 | 描述 |
|---|---|
| source-over | 默认值。将新形状绘制在现有内容之上 |
| source-in | 仅在新形状和现有内容重叠的地方绘制新形状。其他地方均透明 |
| source-out | 仅在新形状不与现有内容重叠的地方绘制新形状 |
| source-atop | 仅在新形状与现有内容重叠的地方绘制新形状 |
| destination-over | 将新形状绘制在现有内容后面 |
| destination-in | 保留新形状和现有内容重叠的部分。其他地方均透明 |
| destination-out | 保留新形状不重叠的现有内容 |
| destination-atop | 保留新形状重叠的现有内容。新形状绘制在现有内容后面 |
| lighter | 在两个形状重叠的地方产生更亮的颜色 |
| copy | 仅显示新形状 |
| xor | 形状在重叠处透明，其他地方正常绘制 |
| multiply | 将顶层像素与底层像素相乘。结果是更暗的图像 |
| screen | 反转像素，然后相乘，再反转。结果是更亮的图像（与 "multiply" 相反） |
| overlay | "multiply" 和 "screen" 的组合。底层颜色暗的部分更暗，亮的部分更亮 |
| darken | 保留两个图层的最暗像素 |
| lighten | 保留两个图层的最亮像素 |
| color-dodge | 用反转的顶层像素除以底层像素 |
| color-burn | 用反转的底层像素除以顶层像素，然后反转结果 |
| hard-light | 类似于 "overlay"，但交换了顶层和底层 |
| soft-light | "hard-light" 的柔和版本 |
| difference | 从顶层像素减去底层像素（或反之），以始终得到正值 |
| exclusion | 类似于 "difference"，但对比度较低 |
| hue | 采用顶层的色相，并保留底层的信息和饱和度 |
| saturation | 采用顶层的饱和度，并保留底层的信息和色相 |
| color | 采用顶层的色相和饱和度，并保留底层的信息 |
| luminosity | 采用顶层的信息，并保留底层的色相和饱和度 |
