HTML Canvas 合成
globalCompositeOperation 属性
The 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 属性值
The 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 | 采用顶层色调和彩度，保留底层亮度 |
| 亮度 | 采用顶层亮度，保留底层色调和彩度 |
