HTML5 - Canvas的使用样例7（合成操作）
作者：hangge | 2016-01-29 08:50
通常使用<canvas>绘图时，后绘制的图形会覆盖在先绘制的图形上方，即遮住先绘制的图形。这是由于默认的合成操作时source-over。除了这种合成方式，还有其他许多合成方式告诉<canvas>怎么显示两个重叠的图形。
1，所有的合成操作及其效果
11种合成方式如下：source-over、source-in、soruce-out、source-atop、destination-over、destination-in、destination-out、destination-atop、lighter、copy、xor。
下面演示效果（先绘制一个矩形 ，再在上面绘制一个圆形）
2，如何设置合成操作方式
要改变<canvas>当前使用的合成操作方式，只要在画后面的图形之前设置绘图上下文的 globalCompositeOperation 属性即可。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//绘制矩形
context.fillStyle = "blue";
context.fillRect(15,15,100,100);
//选择globalCompositeOperation
context.globalCompositeOperation = "source-atop";
//在上方绘制圆形
context.fillStyle = "red";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.fill();
全部评论（1）
航哥，有空用同样的方式写写swift的绘图操作呀
站长回复：可以，不过最近事情很多。这个只能往后排了。