                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

cancas层叠问题

我想问一下老师，如何解决层叠问题

我是超人我会飞

2015-05-21

源自：Canvas绘图详解 5-1

关注问题我要回答

1918

操作

收起

1 回答

asc1120
2015-07-18

试着做了下，不知道有没有什么问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<canvas id="canvas" style="display: block; margin: 0 auto; border: 1px solid #999;"></canvas>
	<script type="text/javascript">
	window.onload=function(){
		var canvas=document.getElementById("canvas");
		canvas.width=1200;
		canvas.height=600;
		var ctx=canvas.getContext("2d");

		var skyStyle=ctx.createLinearGradient(0,0,0,canvas.height);
		skyStyle.addColorStop(0.0,'black');
		skyStyle.addColorStop(1.0,'#035')
		ctx.fillStyle=skyStyle;
		ctx.fillRect(0,0,canvas.width,canvas.height);		
		fill(canvas.width,canvas.height,5,ctx);
	}

	function fill(w,h,r,ctx){
		var _data=[];	//储存星星的坐标，用于比较
		var abc;
		for(var i=0;i<200;i++){
			var R=Math.round(Math.random()*5)+r;
			var x=Math.round(Math.random()*(w-2*R))+R;
			var y=Math.round(Math.random()*(h*0.65-2*R))+R;
			var rote=Math.round(Math.random()*360);
			 		
			
			//判断条件，若当前位置与其他星星不重合就会返回其他星星的个数
			abc=function(){
				var a=0;
				for(var j=0;j<_data.length;j++){
					if(!((_data[j][0]+_data[j][2]>x&&x>_data[j][0]-_data[j][2])&&(_data[j][1]+_data[j][2]>y&&y>_data[j][1]-_data[j][2]))){
						a+=1;
					}
				}
				return a;
			}
			
			//满足条件就会重新随机坐标,	注意：画布太小星星太多可能会造成死循环
			while(abc()!=_data.length){
				x=Math.round(Math.random()*(w-2*R))+R;
				y=Math.round(Math.random()*(h*0.65-2*R))+R;		
			}

			_data.push([x,y,R]);	//把当前的坐标和半径添加进去，完全分离则设置为2*R

			drawStart(x,y,R,rote,ctx);
		}
	}

	//绘制图形
	function drawStart(x,y,R,rote,ctx){

		ctx.lineWidth=R/(R*10);
		ctx.lineJoin="round";
		ctx.fillStyle="yellow";
		ctx.strokeStyle="yellow";

		ctx.save();
		ctx.translate(x,y);
		ctx.rotate(rote/180*Math.PI);
		ctx.scale(R,R);
		startPath(ctx);
		ctx.fill();
		ctx.stroke();
		ctx.restore();	
	}

	//绘制路径
	function startPath(ctx){
		ctx.beginPath();
		for(var i=0;i<5;i++){
			ctx.lineTo(Math.cos((18+i*72)/180*Math.PI),-Math.sin((18+i*72)/180*Math.PI));
			ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
		}
		ctx.closePath();	
	}
	</script>
</body>
</html>