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 |
❮ Canvas 参考
