问答详情
源自:4-1 画一片星空

关于星星不重复

我做一个判断,判断两个大圆的弧线坐标不一样,这样可以实现不重叠么,

提问者:you阝 2015-09-25 16:56

个回答

  • CoolHuan
    2016-06-17 14:55:36

    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();
    
    	}


  • 初心不变
    2015-12-31 13:57:38

    应该不可以