html5 canvas教程|HTML5中Canvas的使用例子

更新时间:2020-04-24    来源:html5教程    手机版     字体:

【www.bbyears.com--html5教程】

通常使用绘图时,后绘制的图形会覆盖在先绘制的图形上方,即遮住先绘制的图形。这是由于默认的合成操作时source-over。除了这种合成方式,还有其他许多合成方式告诉怎么显示两个重叠的图形。

1,所有的合成操作及其效果

11种合成方式如下:source-over、source-in、soruce-out、source-atop、destination-over、destination-in、destination-out、destination-atop、lighter、copy、xor。
下面演示效果(先绘制一个矩形 ,再在上面绘制一个圆形)

原文:HTML5 - Canvas的使用样例7(合成操作)


2,如何设置合成操作方式

要改变当前使用的合成操作方式,只要在画后面的图形之前设置绘图上下文的 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();

本文来源:http://www.bbyears.com/wangyezhizuo/93018.html