在学习Canvas组合图形时看描述有些云里雾里，于是记录下实际效果来方便查看：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | #canvas示例代码<canvas id="canvas" width="400" height="300"></canvas>#js示例代码function draw(id){ var canvas = document.getElementById(id); if(canvas == null) return false; var context = canvas.getContext('2d'); var oprtns = new Array( "source-atop", "source-in", "source-out", "source-over", "destination-atop", "destination-in", "destination-out", "destination-over", "lighter", "copy", "xor" ); i = 8; context.fillStyle = "blue"; context.fillRect(10,10,60,60); context.globalCompositeOperation = oprtns[0];#替换此处数字来查看效果 context.beginPath(); context.fillStyle = "red"; context.arc(60,60,30,0,Math.PI*2,false); context.fill();} |
