参考：
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>