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