我的canvas畫星空的問題出現在哪里？
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
</head>
<body>
?? <canvas id="Canvas" style="border:1px solid #000000;">
</canvas>
</body>
??? <script>
??????? window.onload = function(){
??????????? var canvas = document.getElementById('Canvas');
??????????? canvas.width=800;
??????????? canvas.height=800;
??????????? var ctx = canvas.getContext('2d');
?????????? ?
??????????? ctx.rect(0,0,800,800);
??????????? ctx.fillStyle='#000';
??????????? ctx.fill();
??????????? ctx.stroke(); ?
?????????? ?
?????????? ?
??????????? for(var i=0;i<200;i++){
??????????????? var r=Math.random()*10+10;
??????????????? var x=Math.random()*800-r;
??????????????? var y=Math.random()*800;
??????????????? var a=Math.random()*360;
??????????????? drawStar(ctx,x,y,r,a);
??????????? }
?????????? ?
??????? }
??????? function drawStar(ctx,x,y,r,rot){
??????????? ctx.save();
??????????? ctx.translate(x,y);
??????????? ctx.rotate(rot/180*Math.PI)
??????????? starPath(ctx);
??????????????? ctx.fillStyle='#fb3';
??????????????? ctx.strokeStyle='#fd5';
??????????????? ctx.lineWidth=3;
??????????????? ctx.lineJoin='round';
?????????? ?
??????????????? ctx.fill();
??????????????? ctx.stroke();
?????????? ?
??????????? ctx.restore();
??????? }
?????? ?
??????????? function starPath(ctx){
??????????????? ctx.beginPath();
??????????????? for(var i=0 ; i<5 ; i++){
??????????????????? ctx.lineTo(Math.cos((18+i*72)/180*Math.PI*20),
????????????????????????????? -Math.sin((18+i*72)/180*Math.PI)*20);
??????????????????? ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,
????????????????????????????? -Math.sin((54+i*72)/180*Math.PI)*0.5*20)
??????????????? }
??????????????? ctx.closePath();
??????????? }
??? </script>
</html>
