关于星星不重复
我做一个判断，判断两个大圆的弧线坐标不一样，这样可以实现不重叠么，
you阝
2015-09-25
2 回答
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();
}
举报
0/150
提交
取消
