合成
除了之前介绍的属性之外,还有两个属性会应用到整个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.以上测试结果为谷歌浏览器,不同浏览器的实现可能存在差异