我做一个判断,判断两个大圆的弧线坐标不一样,这样可以实现不重叠么,
var stars =[]; $(function(){ var canvas=$("#canvas"); canvas.width=800; canvas.height=800; var context=canvas[0].getContext("2d"); context.fillStyle="black"; context.fillRect(0,0,canvas.width,canvas.height); addStars(); upadteStars(); console.log(stars.length); drowStarSky(context); }) //添加200个随机星星到星星的数组 function addStars() { // body... for (var i = 0; i < 200; i++) { var star={ r:Math.random()*10+10, x:Math.random()*(canvas.width-40)+20, y:Math.random()*(canvas.height-40)+20, a:Math.random()*360 } stars.push(star); }; } //去掉重合的星星 function upadteStars () { for (var i = 0; i < stars.length; i++) { for (var j = i+1; j < stars.length; j++) { var a=Math.pow(stars[i].x-stars[j].x,2); var b=Math.pow(stars[i].y-stars[j].y,2); var c=Math.pow(stars[i].r+stars[j].r,2) if(a+b<c){ stars.splice(j,1); } }; }; } //将不重合的星星全部画入画布 function drowStarSky(context){ for (var i = 0; i < stars.length; i++) { drowStar(stars[i].r/2,stars[i].r,stars[i].x,stars[i].y,context,stars[i].a); }; } //画一个星星 function drowStar (r,R,x,y,ctx,rot) { ctx.beginPath(); for (var i = 0; i < 5; i++) { ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y) }; ctx.closePath(); ctx.lineJoin="round"; ctx.lineStyle="#058"; ctx.lineWidth=5; ctx.fillStyle="yellow" ctx.fill(); ctx.stroke(); }
应该不可以