Canvas globalCompositeOperation 属性
示例
绘制两个矩形。红色矩形为目标，蓝色矩形为源。
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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);
自己尝试 »
描述
The globalCompositeOperation 属性设置或返回源如何绘制在目标上。
源 = 您将在画布上绘制的图形。
目标 = 已经绘制在画布上的图形。
语法
| context.globalCompositeOperation = "value" |
属性值
| 值 | 描述 | 播放 |
|---|---|---|
| source-over | 默认 在目标上显示源。 |
播放 » |
| source-atop | 在目标顶部显示源。不显示源图像中位于目标外部的部分。 | 播放 » |
| source-in | 在目标内显示源。仅显示位于目标内的源部分，目标是透明的。 | 播放 » |
| source-out | 在目标外显示源。仅显示位于目标外部的源部分，目标是透明的。 | 播放 » |
| destination-over | 在源上显示目标。 | 播放 » |
| destination-atop | 在源顶部显示目标。不显示目标图像中位于源外部的部分。 | 播放 » |
| destination-in | 在源内显示目标。仅显示位于源内的目标部分，源是透明的。 | 播放 » |
| destination-out | 在源外显示目标。仅显示位于源外部的目标部分，源是透明的。 | 播放 » |
| lighter | 显示源 + 目标。 | 播放 » |
| copy | 显示源。目标被忽略。 | 播放 » |
| xor | 源通过使用与目标的异或运算来组合。 | 播放 » |
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
globalCompositOperation 在所有现代浏览器中都受支持。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
