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

关于星星切边的问题，我想的方法太消耗资源了，而且只适用于星星数少的时候，请问有谁知道精简的算法啊？

我的基本思路就是每生成一个星星就与之前的进行比较计算位置加上半径，但是越到最后比较的就越多，所以如果星星数太多的话还会卡，请问谁有什么比较好的算法么？

哦，这里的代码也写了不让星星出夜空范围的代码，这个比较简单，算一下就好了，

还是求问星星之间切边的算法~

for(var i=0;i<20;i++){

// random()返回一个0~1

// 10~20的随机数

var r=Math.random()*10+10;

var x=Math.random()*canvas.width;

var y=Math.random()*canvas.height;

var a=Math.random()*360;

//防止星星出了星空的边界

if(x+a>canvas.width||y+a>canvas.height||x-a<0||y-a<0){

i--;

continue;

}

//防止星星重叠

for(var j=0;j<stars.length;j++){

console.log("j is "+j);

var maxRadius=r>stars[j].radius?r:stars[j].radius;

if(Math.abs(x-stars[j].x)<maxRadius||Math.abs(y-stars[j].y)<maxRadius){

flag=false;

i--;

break;

}

console.log("i is "+i);

if(flag){

var star={

x:x,

y:y,

radius:r

};

stars.push(star);

console.log("产生第"+(i+1)+"个星星");

drawStar(context,x,y,r,r/2,a);

}

flag=true;

}

帅的人还在学习

2015-03-28

源自：Canvas绘图详解 4-1

关注问题我要回答

1283

操作

收起

4 回答

Q版的我
2015-12-16

var position = [];
    window.onload =function(){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.fillStyle = "#000";
        context.fillRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<100;i++){
            var r = Math.random()*10 +10;
            var x1 = (canvas.width-2*r)*Math.random()+r; 
            var y1 = (canvas.height-2*r)*Math.random()+r;
            var a = Math.random()*360;
            for(var j=0;j<position.length;j++){
                while((Math.pow(position[j].x-x1,2)+Math.pow(position[j].y-y1,2)<Math.pow(position[j].r+r,2))){
                    x1 = (canvas.width-2*r)*Math.random()+r; 
                    y1 = (canvas.height-2*r)*Math.random()+r;
                    j = 0;
                }                
            }
            var p = {x:x1,y:y1,r:r};
            position.push(p);
            drawStar(context,r/2,r,x1,y1,a);
        }  
    }

我测试你的代码的时候，i取30就动不了，这是我写的代码，至少i等于100还可以，可以参考参考

0 回复有任何疑惑可以回复我~

收起回答

Q版的我
2015-12-16

maxRadius不应该是两个圆的半径之和吗？

0 回复有任何疑惑可以回复我~

收起回答

锚机
2015-10-18

//防止星星出了星空的边界直接从随机值开始下手是最好处理的

var option= {
r : Math.random() * 10 + 10,
rotate : Math.random() * 360 };
option.x = Math.random() * (canvas.width - (option.r * 2)) + option.r;
option.y = Math.random() * (canvas.height - (option.r * 2)) + option.r;