                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

cancas層疊問題

我想問一下老師，如何解決層疊問題

我是超人我會飛

2015-05-21

源自：Canvas繪圖詳解 5-1

關(guān)注問題我要回答

1892

操作

收起

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);
			?		
			
			//判斷條件，若當前位置與其他星星不重合就會返回其他星星的個數(shù)
			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;
			}
			
			//滿足條件就會重新隨機坐標,	注意：畫布太小星星太多可能會造成死循環(huán)
			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]);	//把當前的坐標和半徑添加進去，完全分離則設(shè)置為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>