Canvas之8图形组合

图形组合#

• cvs.globalCompositeOperation=type;
• type的值:
  • 1.source-over 默认值 覆盖 在原来的图形上绘制新图 新图在上
  • 2.source-out 显示新图的非交集部分
  • 3.source-in 显示新图和图形的交集，颜色是新图的颜色
  • 4.source-atop 显示旧图和交集部分 交集是新图颜色
  • 5.destination-over 在原来图形的下面绘制新图 旧图在上
  • 6.destination-out 显示旧图的非交集部分
  • 7.destination-in 显示交集 颜色是旧图颜色
  • 8.destination-atop 显示新图和交集部分 交集是旧图颜色
  • 9.lighter<全部显示> 交集部分是叠加颜色
  • 10.xor<显示新旧图的非交集部分>
  • 11.copy 只显示新图

• 案例1<在原来的图形上绘制新图> 新图在上

1
var draw=document.getElementById('draw');
2
var cvs=draw.getContext('2d');
3
function draw1(){
4
    cvs.fillStyle='gold';
5
    cvs.fillRect(10,10,100,100);
6
    cvs.globalCompositeOperation='source-over';
7
    cvs.fillStyle='pink';
8
    cvs.fillRect(50,50,100,100);
9
}
10
draw1();