Javascript高級編程學習筆記（94）—— Canvas(11) 合成
阿新 • • 發佈：2019-03-22
asc tex 字符 contex copy posit 存在 mage con
合成
除了之前介紹的屬性之外,還有兩個屬性會應用到整個2d上下文中;
- globalAlpha 用於指定所有繪制的透明度
- globalComposition 用於表示後繪制的圖形怎樣與先繪制的圖形進行結合
- 該屬性的值是字符串,可能的值如下
- source-over(默認) 後繪制的圖形位於先繪制的圖形的上方
- source-in 後繪制的圖形與先繪制的圖形重疊部分可見,其它部分透明
- source-out 後繪制的圖形與先繪制的圖形不重疊部分可見,先繪制的圖形完全透明
- source-atop 後繪制的圖形與先繪制的圖形重疊部分可見,先繪制的圖形不受影響
- destination-over 後繪制的圖形位於先繪制圖形的下方,只有之前透明的部分可見
- destination-in 後繪制的圖形位於先繪制圖形的下方,兩者不重疊部分完全透明
- destination-out 後繪制的圖形擦除與先繪制圖形的重疊部分
- destination-atop 後繪制的圖形位於先繪制圖形的下方,在兩者不重疊的地方,先繪制的圖形會透明
- lighter 後繪制的圖形與先繪制的圖形重疊部分的值相加,使該部分的值變亮
- copy 後繪制的圖形完全替代與之重疊的先繪制圖形
- xor 後繪制圖形與先繪制圖形的重疊部分執行異或操作
- 該屬性的值是字符串,可能的值如下
示例如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Canvas合成</title> <meta name="Description" content=""/> <meta name="Author" content="lhy"/> <style> body{ background-color: #75727c; } </style> </head> <body> <canvas id="canvas" width="800px" height="400px" style="margin: 200px 200px"></canvas> <script> let canvas = document.getElementById(‘canvas‘); let context = canvas.getContext(‘2d‘); // 繪制紅色矩形 context.fillStyle = "#ff0000"; context.fillRect(10,10,50,50); // 繪制半透明藍色矩形 context.fillStyle = ‘rgba(0,0,255,0.5)‘; context.fillRect (30,30,50,50); </script> </body> </html>
基礎效果如下:
source-in:
source-out:
source-atop:
destination-over:
destination-in:
destination-out:
destination-atop:
lighter:
copy:
xor:
PS.以上測試結果為谷歌瀏覽器,不同瀏覽器的實現可能存在差異
Javascript高級編程學習筆記（94）—— Canvas(11) 合成