我想问一下老师，如何解决层叠问题
试着做了下 ，不知道有没有什么问题
<!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>