【www.bbyears.com--html5教程】
通常使用
1,所有的合成操作及其效果
11种合成方式如下:source-over、source-in、soruce-out、source-atop、destination-over、destination-in、destination-out、destination-atop、lighter、copy、xor。
下面演示效果(先绘制一个矩形 ,再在上面绘制一个圆形)
2,如何设置合成操作方式
要改变
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();