为什么一个星星都不能显示，去掉for循环能显示一个星星-慕课网

为什么一个星星都不能显示，去掉for循环能显示一个星星

来源：4-1 画一片星空

青墨

2015-02-16 22:18

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>一片星空</title>
   <style type="text/css">
       body{background: #012;}
   </style>
   <script type="text/javascript">
       window.onload=function()
       {
           var canvas=document.getElementById("canvas");
           canvas.width=800;
           canvas.height=800;

           var context=canvas.getContext("2d");

           /*context.fillStyle="#012";
           context.fillRect(0,0,convas.width,convas.height);*/
           for(var i=0;i<200;i++)
           {
               var r=Math.random()*10+10;
               var x=Math.random()*convas.width;
               var y=Math.random()*convas.height;
               var a=Math.random()*360;
               drawstar(context,r,r/2,x,y,a);
           }
           //drawstar(context,10,5,100,100,30);
       }
       function drawstar(cxt,oR,iR,x,y,rot)
       {
           cxt.beginPath();
           for(var i=0;i<5;i++)
           {
               cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x,-Math.sin((18+i*72-rot)/180*Math.PI)*oR+y);
               cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,-Math.sin((54+i*72-rot)/180*Math.PI)*iR+y);
           }
           cxt.lineWidth=1;
           cxt.strokeStyle="#fd3";
           cxt.fillStyle="#fd5";
           cxt.lineJoin="round";
           cxt.fill();
           cxt.stroke(); //先填充后描边
       }
   </script>
</head>
<body>
   <canvas id="canvas" style="border:1px solid #aaa;display:block;"></canvas>
</body>
</html>