                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

為什么一個星星都不能顯示，去掉for循環(huán)能顯示一個星星

<!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>