canvas学习（十二）：图形透明及交叠效果设置

一、设置透明度：

canvas中设置全局透明度用globalAlpha来设置，它的值基于0-1之间，默认为1表示不透明，0表示全透明。

示例如下：

在canvas中绘制了100个随机小球，其中有交叠的，也有分开的。

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;;
		myCanvas.height = document.documentElement.clientHeight-20;;
		var context =myCanvas.getContext("2d");
		
		//globalAlpha:用来设置全局的透明度，其值基于0-1之间，默认为1表示不透明，0表示全透明
		context.globalAlpha=0.5;//半透明

		//随机生成100个颜色各异的圆
		var r=0,g=0,g=0;
		for(var i=0;i<100;i++){
			//生成颜色
			r = Math.floor(Math.random()*255);//向下取整
			g = Math.floor(Math.random()*255);
			b = Math.floor(Math.random()*255);
			//填充颜色
			context.fillStyle="rgb("+r+","+g+","+b+")";

			//绘制圆
			context.beginPath();
			//设置圆心坐标，圆半径，开始弧度，结束弧度
			context.arc(Math.random()*myCanvas.width,Math.random()*myCanvas.height,Math.random()*100,0,Math.PI*2);
			context.closePath();

			//填充圆
			context.fill();
		}
	}else{
		return false;
	}
}

二、设置交叠效果：

设置交叠效果用globalCompositeOperation，它有11种效果，分别为：source-over、source-atop、source-in、source-out、destination-over、destination-atop、destination-in、destination-out、lighter、copy、xor。具体效果图大家可以看看附件来感受一下。

效果图示例代码如下:

页面结构：

<style type="text/css">
#button{width:1200px;margin:10px auto;clear:both;}
#button a{font-size:18px;display:block;float:left;margin-right:14px;}
</style>

<canvas id="myCanvas" style="height:100%;display:block;margin:0 auto;border:1px solid #aaa;">
	您的浏览器不支持canvas，请换个浏览器试试
	<!--这句话在支持canvas的浏览器中会被忽略，不支持的则会显示出来-->
</canvas>

<div id="button">
	<a href="#">source-over</a>
	<a href="#">source-atop</a>
	<a href="#">source-in</a>
	<a href="#">source-out</a>
	<a href="#">destination-over</a>
	<a href="#">destination-atop</a>
	<a href="#">destination-in</a>
	<a href="#">destination-out</a>
	<a href="#">lighter</a>
	<a href="#">copy</a>
	<a href="#">xor</a>
</div>

JS代码：

window.onload=function(){
	draw("source-over");//默认

	//为各个A标签添加click事件
	var buttons = document.getElementById("button").getElementsByTagName("a");
	for(var i=0;i<buttons.length;i++){
		buttons[i].onclick=function(){
			draw(this.text);
			return false;
		}
	}
}

/**
*该方法用来绘制图形
*@param compositeStyle:图形属性
*/
function draw(compositeStyle){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;
		myCanvas.height = document.documentElement.clientHeight-50;
		var context =myCanvas.getContext("2d");
		
		context.clearRect(0,0,myCanvas.width,myCanvas.height);
		
		//设置样式
		context.font="bold 40px Arial";
		context.textAlign="center";
		context.textBaseline="middle";
		context.fillStyle="#058";
		context.fillText("globalCompositeOperation="+compositeStyle,myCanvas.width/2,60);

		//绘制一个矩形
		context.fillStyle="blue";
		//在(x,y)的位置绘制一个长宽均为400的矩形
		var x = (myCanvas.width-400)/2;
		var y = (myCanvas.height-500)/2;
		context.fillRect(x,y,400,400);

		//设置重叠效果
		context.globalCompositeOperation=compositeStyle;

		//绘制一个三角形
		context.fillStyle="red";
		context.beginPath();
		var x1 = x+200,y1 = y+200;
		var x2 = x-100,y2 = y+500;
		var x3 = x+500,y3 = y+500;
		context.moveTo(x1,y1);
		context.lineTo(x2,y2);
		context.lineTo(x3,y3);
		context.closePath();
		context.fill();			
	}else{
		return false;
	}
}

应用示例如下：绘制了100个随机小球，并让其在canvas画布中运动。

页面结构跟前面的一样的，这里就不赘述了，直接上JS代码：

var ball = new Array();
var interval=null;
window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;
		myCanvas.height = document.documentElement.clientHeight-50;
		var context =myCanvas.getContext("2d");	
		
		//绘制图形
		drawBall(context,"source-out");

		//为各个A标签添加click事件
		var buttons = document.getElementById("button").getElementsByTagName("a");
		for(var i=0;i<buttons.length;i++){
			buttons[i].onclick=function(){
				drawBall(context,this.text);
				return false;
			}
		}
					
	}else{
		return false;
	}

}

//该方法用来随机生成100个圆球
function initBall(){
	ball.splice(0,ball.length);
	//随机生成100个颜色各异的圆
	var r=0,g=0,g=0,radius=0,aBall=null;
	for(var i=0;i<100;i++){
		//生成颜色
		r = Math.floor(Math.random()*255);//向下取整
		g = Math.floor(Math.random()*255);
		b = Math.floor(Math.random()*255);
		radius = Math.random()*50+20;//半径
		
		aBall={
			color:"rgb("+r+","+g+","+b+")",
			radius:radius,
			x:Math.random()*(myCanvas.width-2*radius)+radius,
			y:Math.random()*(myCanvas.height-2*radius)+radius,
			vx:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100)),
			vy:(Math.random()*5+5)*Math.pow(-1,Math.floor(Math.random()*100))
		};
		ball[i]=aBall;
	}
}

function drawBall(cxt,compositeStyle){
	clearInterval(interval);
	initBall();//生成100个圆球
	interval = setInterval(function(){
		draw(cxt,compositeStyle);
		updateBall(cxt.canvas.width,cxt.canvas.height);
		console.log("123 "+ball.length);
	},100);
}

/**
*该方法用来绘制图形
*@param cxt:canvas的上下文环境
*@param compositeStyle:图形属性
*/
function draw(cxt,compositeStyle){
	var	myCanvas = cxt.canvas;
	cxt.clearRect(0,0,myCanvas.width,myCanvas.height);
	//设置样式
	cxt.font="bold 40px Arial";
	cxt.textAlign="center";
	cxt.textBaseline="middle";
	cxt.fillStyle="#058";
	cxt.fillText("globalCompositeOperation="+compositeStyle,myCanvas.width/2,60);
	
	//设置重叠效果
	cxt.globalCompositeOperation=compositeStyle;

	//绘制小球
	for(var i=0;i<ball.length;i++){
		cxt.fillStyle=ball[i].color;//填充颜色
		cxt.beginPath();
		cxt.arc(ball[i].x,ball[i].y,ball[i].radius,0,2*Math.PI,true);//绘制弹跳小球
		cxt.closePath();
		cxt.fill();//给小球填充颜色
	}
}

//小球的运动
function updateBall(width,height){
	for(var i=0;i<ball.length;i++){
		ball[i].x +=ball[i].vx;
		ball[i].y +=ball[i].vy;

		if(ball[i].x-ball[i].radius<=0){
			ball[i].vx = -ball[i].vx;
			ball[i].x=ball[i].radius;
		}

		if(ball[i].x+ball[i].radius>=width){
			ball[i].vx = -ball[i].vx;
			ball[i].x=width-ball[i].radius;
		}

		if(ball[i].y-ball[i].radius<=0){
			ball[i].vy = -ball[i].vy;
			ball[i].y=ball[i].radius;
		}

		if(ball[i].y+ball[i].radius>=height){
			ball[i].vy = -ball[i].vy;
			ball[i].y=height-ball[i].radius;
		}
	}
}

注：这个示例中有个问题，globalCompositeOperation属性值切换的勤了很容易卡死。琢磨了好几遍代码都没找到问题所在（可能也不是个问题） ，有同道中人能看出问题所在的还请留个言，不胜感激。

 

最后，感谢老师的分享！