Canvas--合成

一、globalAlpha屬性：設置或返回繪圖的當前透明值（alpha 或 transparency）。

　　globalAlpha 屬性值必須是介於 0.0（徹底透明） 與 1.0（不透明） 之間的數字。

　　設置後所繪製的全部圖形都具備該透明度。

 1 for (let i = 0; i < 10; i++) {
 2     if (i < 5) {
 3         context.beginPath()
 4         context.globalAlpha = 1
 5         context.fillStyle = 'red'
 6         context.fillRect(0 + 200 * i, 0, 100, 80)
 7         context.closePath()
 8 
 9         context.beginPath()
10         context.fillStyle = 'blue'
11         context.globalAlpha = 0.1 * (i + 1)
12         context.fillRect(50 + 200 * i, 40, 100, 80)
13         context.closePath()
14     } else {
15         context.beginPath()
16         context.globalAlpha = 1
17         context.fillStyle = 'red'
18         context.fillRect(0 + 200 * (i - 5), 150, 100, 80)
19         context.closePath()
20 
21         context.beginPath()
22         context.fillStyle = 'blue'
23         context.globalAlpha = 0.1 * (i + 1)
24         context.fillRect(50 + 200 * (i - 5), 190, 100, 80)
25         context.closePath()
26     }
27 }

二、globalCompositeOperation屬性：設置或返回如何將一個源（新的source）圖像繪製到目標（已有的destination）的圖像上。

　　屬性值：

　　source-over         ：  默認。在目標圖像上顯示源圖像。

　　source-atop         ：  在目標圖像頂部顯示源圖像。源圖像位於目標圖像以外的部分是不可見的。

　　source-in             ：  在目標圖像中顯示源圖像。只有目標圖像以內的源圖像部分會顯示，目標圖像是透明的。

　　source-out           ：  在目標圖像以外顯示源圖像。只有目標圖像以外的源圖像部分會顯示，目標圖像是透明的。

　　destination-over  ：  在源圖像上顯示目標圖像。

　　destination-atop  ：  在源圖像頂部顯示目標圖像。目標圖像位於源圖像以外的部分是不可見的。

　　destination-in      ：  在源圖像中顯示目標圖像。只有源圖像以內的目標圖像部分會被顯示，源圖像是透明的。

　　destination-out    ：  在源圖像以外顯示目標圖像。只有源圖像以外的目標圖像部分會被顯示，源圖像是透明的。

　　lighter                  ：  顯示源圖像 + 目標圖像。

　　copy                    ：  顯示源圖像。忽略目標圖像。

　　xor                       ：  使用異或操做對源圖像與目標圖像進行組合。

 1 const GCO = ['source-over', 'source-atop', 'source-in', 'source-out', 'destination-over',
 2     'destination-atop', 'destination-in', 'destination-out', 'lighter', 'copy', 'xor'
 3 ]
 4 
 5 for (let i = 0; i < GCO.length; i++) {
 6     let div = document.createElement('div')
 7     div.style.float = 'left'
 8     let canvas = document.createElement('canvas')
 9     canvas.width = 300
10     canvas.height = 240
11     let ctx = canvas.getContext('2d')
12 
13     ctx.beginPath()
14     ctx.save()
15     ctx.fillStyle = "red";
16     ctx.fillRect(0, 0, 150, 120);
17     ctx.globalCompositeOperation = GCO[i];
18     ctx.fillStyle = "blue";
19     ctx.fillRect(75, 60, 150, 120);
20     ctx.closePath()
21 
22     ctx.restore()
23     ctx.beginPath()
24     ctx.fillStyle = '#000'
25     ctx.shadowColor = '#ffff00'
26     ctx.shadowBlur = 5
27     ctx.font = 'bold 30px Arial'
28     ctx.textAlign = 'center'
29     ctx.textBaseline = 'middle'
30     ctx.fillText(GCO[i], 150, 120)
31     ctx.closePath()
32 
33     div.appendChild(canvas)
34     document.body.appendChild(div)
35 }