HTML 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 属性设置或返回源如何绘制在目标之上。
源 = 您即将绘制在 canvas 上的图形。
目标 = 已绘制在 canvas 上的图形。
语法
| 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 |
