参考：
http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>globalCompositeOperation</title>
</head> <body>
<div>
<div>先画矩形后画圆;source指将要绘制的;destination指已经存在的;</div>
<select name="slt" id="sltId" onchange="showGCO()">
<option value="copy">copy-只画新图</option>
<option value="darker">darker-颜色相减</option>
<option value="destination-atop">destination-atop-</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="destination-over">destination-over</option>
<option value="lighter">lighter-颜色相加</option>
<option value="source-atop">source-atop</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="source-over">source-over</option>
<option value="xor">xor</option>
</select>
</div>
<canvas id='myCanvas' width='800' height='600'>
your browser does not support canvas
</canvas>
<script type="text/javascript">
function showGCO() {
var slt = document.getElementById('sltId');
// alert(slt.value);
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#00ff00';
ctx.fillRect(10, 10, 50, 50);
ctx.globalCompositeOperation = slt.value;
ctx.beginPath();
ctx.fillStyle = '#ff0000';
ctx.arc(50, 50, 30, 0, 2 * Math.PI);
ctx.fill();
}
</script>
</body> </html>