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