//目的：将星空中的五角星做到不重复，无覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星空案例的优化</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid red;display: block;margin: 0 auto;">
当前浏览器不支持canvas，请更换浏览器后再试！
</canvas>
<script type="text/javascript">
//获取canvas标签，并设置画布的大小
var stars=[]; //创建一个数组，用来接收符合要求的星星
onload=function(){
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width=800;
canvas.height=600;
context.fillStyle='black';
context.fillRect(0,0,canvas.width,canvas.height);
for(var i=0;i<200;i++){ //利用json来创建200个随机星星
var aStar={
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
R:Math.random()*5+5,
a:Math.random()*360
};
if(stars.length==0){ //如果数组里面没有星星，则直接添加一个
stars.push(aStar);
}else{
for (var i = 0; i < stars.length; i++) {
var sum=0; //遍历当前的数组，并创建一个局部变量sum，如果当前的星星与数组中的星星不重合不覆盖
//则自加
if (Math.sqrt(Math.pow(aStar.x-stars[i].x,2)+Math.pow(aStar.y-stars[i].y,2))>aStar.R+stars[i].R) {
sum++;
if (sum==stars.length) { //如果sum的值与当前数组的长度值一样，则表示该星星与数组中的任何一个星星都不
//重合
stars.push(aStar);
}
}
}
}
}
for(var i=0;i<stars.length;i++){
drawStar(context,stars[i].x,stars[i].y,stars[i].R/2,stars[i].R,stars[i].a);
}
}
//绘制五角星的函数
//参数margin是表示偏移的角度，按逆时针算
function drawStar(ctx,x,y,r,R,margin){
ctx.beginPath();
for(var i=0;i<5;i++){
ctx.lineTo(x+R*Math.cos((18+i*72+margin)/180*Math.PI),y-R*Math.sin((margin+18+i*72)/180*Math.PI));
ctx.lineTo(x+r*Math.cos((54+i*72+margin)/180*Math.PI),y-r*Math.sin((margin+54+i*72)/180*Math.PI));
}
ctx.closePath();
ctx.lineWidth=10;
ctx.strokeStyle="yellow";
ctx.fillStyle="yellow";
ctx.lineJoin="butt";
ctx.fill();
ctx.stroke();
}
</script>
</body>
</html>
for(var i=0;i<200;i++){ //利用json来创建200个随机星星
var aStar={
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
R:Math.random()*5+5,
a:Math.random()*360
};
if(stars.length==0){ //如果数组里面没有星星，则直接添加一个
stars.push(aStar);
}else{
for (var i = 0; i < stars.length; i++) {
var sum=0; //遍历当前的数组，并创建一个局部变量sum，如果当前的星星与数组中的星星不重合不覆盖
//则自加
if (Math.sqrt(Math.pow(aStar.x-stars[i].x,2)+Math.pow(aStar.y-stars[i].y,2))>aStar.R+stars[i].R) {
sum++;
if (sum==stars.length) { //如果sum的值与当前数组的长度值一样，则表示该星星与数组中的任何一个星星都不
//重合
stars.push(aStar);
}
}
}
这部分的循环变量i可能被污染了。