[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(); ```