为什么一个星星都不能显示，去掉for循环能显示一个星星
<!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>
