HTML canvas globalCompositeOperation 属性
实例
使用两个不同的 globalCompositeOperation 值绘制矩形。 红色矩形是destination images 目标图像。 蓝色矩形是source images 源图像:
source-over
destination-over
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定义和用法
globalCompositeOperation 属性设置或返回如何将源(新)图像绘制到目标(现有)图像上。
source image = 您将要放置到画布上的绘图。
destination image = 已经放置在画布上的绘图。
| 默认值: | source-over |
|---|---|
| JavaScript 语法: | context.globalCompositeOperation = "source-in"; |
属性值
| 值 | 描述 | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | Play it » |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | Play it » |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | Play it » |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | Play it » |
| destination-over | Displays the destination image over the source image | Play it » |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | Play it » |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | Play it » |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | Play it » |
| lighter | Displays the source image + the destination image | Play it » |
| copy | Displays the source image. The destination image is ignored | Play it » |
| xor | The source image is combined by using an exclusive OR with the destination image | Play it » |
❮ Canvas 对象

