一.图形组合的方式
1.source-atop
2.source-in
3.source-out
4.source-over
5.destination-atop
6.destination-in
7.destination-out
8.destination-over
9.lighter
10.copy
11.xor
二.实例观看组合效果(请更改实例中数组的索引值,就可以知道各组合效果)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图形的组合</title>
<script>
window.onload = function(){
var oC = document.getElementById('can');
var oCt = oC.getContext('2d');
var arr = ['source-atop','source-in','source-out','source-over','destination-atop','destination-in','destination-out','destination-over','lighter','copy','xor'];
//绘制原图形
oCt.fillStyle = 'blue';
oCt.fillRect(10,10,100,100);
//globalCompositeOperation属性是指定图形组合的方式
oCt.globalCompositeOperation = arr[10];
oCt.beginPath();
oCt.fillStyle = 'red';
oCt.arc(100,100,30,0,Math.PI*2,true);
oCt.fill();
};
</script>
</head>
<body>
<canvas id='can' width="500px" height="500px"></canvas>
</body>
</html>