請問我的代碼在哪出現(xiàn)問題了呢？（星空的不重合無覆蓋問題）
//目的：將星空中的五角星做到不重復(fù)，無覆蓋
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>星空案例的優(yōu)化</title>
</head>
<body>
<canvas id="canvas" ?style="border: 1px solid red;display: block;margin: 0 auto;">
? ?當(dāng)前瀏覽器不支持canvas，請更換瀏覽器后再試！
</canvas>
<script type="text/javascript">
? ?//獲取canvas標(biāo)簽，并設(shè)置畫布的大小
var stars=[]; ? ? ? //創(chuàng)建一個數(shù)組，用來接收符合要求的星星
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來創(chuàng)建200個隨機(jī)星星
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){ ? ? ? ? ? //如果數(shù)組里面沒有星星，則直接添加一個
stars.push(aStar);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?for (var i = 0; i < stars.length; i++) { ? ? ? ?
? ? ? ? ? ? ? ? ? ?var sum=0; ? ? ? ? ? ? ?//遍歷當(dāng)前的數(shù)組，并創(chuàng)建一個局部變量sum，如果當(dāng)前的星星與數(shù)組中的星星不重合不覆蓋
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//則自加
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的值與當(dāng)前數(shù)組的長度值一樣，則表示該星星與數(shù)組中的任何一個星星都不
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//重合
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);
? ? ? ?}
? ?}
? ?//繪制五角星的函數(shù)
? ?//參數(shù)margin是表示偏移的角度，按逆時針?biāo)?br /> 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>
2016-07-31
??for(var i=0;i<200;i++){ ? ? ? ? //利用json來創(chuàng)建200個隨機(jī)星星
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){ ? ? ? ? ? //如果數(shù)組里面沒有星星，則直接添加一個
stars.push(aStar);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?for (var i = 0; i < stars.length; i++) { ? ? ? ?
? ? ? ? ? ? ? ? ? ?var sum=0; ? ? ? ? ? ? ?//遍歷當(dāng)前的數(shù)組，并創(chuàng)建一個局部變量sum，如果當(dāng)前的星星與數(shù)組中的星星不重合不覆蓋
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//則自加
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的值與當(dāng)前數(shù)組的長度值一樣，則表示該星星與數(shù)組中的任何一個星星都不
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//重合
stars.push(aStar);
? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?}
這部分的循環(huán)變量i可能被污染了。