HTML5 - Canvas的使用样例7（合成操作）

2016-01-29 发布：hangge 阅读：1054

通常使用<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();