关于星星切边的问题，我想的方法太消耗资源了，而且只适用于星星数少的时候，请问有谁知道精简的算法啊？
帅的人还在学习
2015-03-28 13:59
我的基本思路就是每生成一个星星就与之前的进行比较计算位置加上半径，但是越到最后比较的就越多，所以如果星星数太多的话还会卡，请问谁有什么比较好的算法么？
哦，这里的代码也写了不让星星出夜空范围的代码，这个比较简单，算一下就好了，
还是求问星星之间切边的算法~
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;
}
4回答
-
- Q版的我
- 2015-12-16 14:37:31
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还可以，可以参考参考
-
- Q版的我
- 2015-12-16 14:29:33
maxRadius不应该是两个圆的半径之和吗？
-
- 锚机
- 2015-10-18 20:11:13
//防止星星出了星空的边界 直接从随机值开始下手是最好处理的
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; -
- 百科船熟
- 2015-09-18 15:36:43
可以默认从中心向外扩散生成星星，这样就不涉及到循环比较了
Canvas绘图详解
72881 学习 · 422 问题
相似问题