合成
最后更新于：2022-04-02 03:29:10
[TOC]
## 合成
```
globalCompositeOperation = type
```
一个十三种类型 [demo](https://www.runoob.com/w3cnote/html5-canvas-intro.html)
1. source-over 新图像覆盖原有图像
2. source-in 仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的
3. source-out 仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明
4. source-atop 新图像仅仅显示与老图像重叠区域
5. destination-over 新图像会在老图像的下面
6. destination-in 仅新老图像重叠部分的老图像被显示，其他区域全部透明
7. destination-out 注意显示的是老图像的部分区域
8. destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面
9. lighter 新老图像都显示，但是重叠区域的颜色做加处理
10. darken 保留重叠部分最黑的像素
11. lighten 保证重叠部分最量的像素
12. xor 重叠部分会变成透明
13. copy 只有新图像会被保留，其余的全部被清除(边透明)
实例
```
function draw(){
var canvas = document.getElementById('tutorial1');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 200, 200);
ctx.globalCompositeOperation = "source-over"; //全局合成操作
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 200, 200);
}
draw();
```
';