大神帮看一下这段JavaScript代码哪里出问题了。

<!DOCTYPE html>

太阳系动态图

    <style>
        #canvas{
            background:#000;
        }
    </style> 

        <img id="earth"src="earth.png"style="display:none" />
        </head>
        <body>
        <canvas id="canvas">浏览器不支持canvas请升级浏览器！</canvas>
        <script>
        var can=document.getElementById("canvas");
        var ctx=can.getContext("2d");
        var w=can.width=window.innerWidth;
        var h=can.height=window.innerHeight;
        window.onresize=function (){
        var w=can.width=window.innerWidth;
        var h=can.height=window.innerHeight;
        }

        function star() {
        ctx.save();
        ctx.translate(400,400);
        var img=new Image();
        img.src='earth.png';

        ctx.beginPath();

        ctx.rotate(60*Math.PI/180);  //添加for循环
        ctx.drawImage(img,180,0,50,50);
        ctx.closePath();
        ctx.restore();
        }
        </script>
        </body>

想问一下以上的代码哪里出了问题？在ctx.beginPath();后面添加
for (var i=0,i<360,i++)
{ctx.rotate(i*Math.PI/180);}
for循环这样添加对不对？
为什么for循环添加了以后，canvas的画布大小就变成了默认的画布大小了。
本来想做一个地球图片然后按弧度旋转的动画，应该用什么样的思路去做？

因为是新手，代码整体结构逻辑还是很多不明白的地方，希望有大神来指点一二。

谢谢先了。

for (var i=0,i<360,i++)因为你语法都错完了，导致整个代码块错误，根本没执行 var can=document.getElementById("canvas");
var ctx=can.getContext("2d");
var w=can.width=window.innerWidth;
var h=can.height=window.innerHeight;
这代码设置canvas的width/height

                for (var i=0,i<360,i++)
                ===>
                for (var i=0;i<360;i++)

而且你for循环执行rotate没什么效果，和直接执行ctx.rotate(360*Math.PI/180);一样了。。用计时器来做

  <style>
        #canvas{
            background:#000;
        }
    </style> 

<img id="earth" src="earth.png" style="display:none" />

<body>
<canvas id="canvas">浏览器不支持canvas请升级浏览器！</canvas>
<script>
    var can = document.getElementById("canvas");
    var ctx = can.getContext("2d");
    var w = can.width = window.innerWidth;
    var h = can.height = window.innerHeight;
    window.onresize = function () {
        var w = can.width = window.innerWidth;
        var h = can.height = window.innerHeight;

    }

    function star() {
        console.log('star')

        ctx.translate(400, 400);

        var img = new Image();
        img.src = 'earth.png';
        img.onload = function () {
            var i = 0;
            setInterval(function () {
                ctx.save();
                ctx.clearRect(0, 0, 10000, 10000)
                ctx.rotate(i * Math.PI / 180)
                ctx.drawImage(img, 180, 0, 50, 50);
                i++
                if (i >= 360) i = 0
                ctx.restore();
            }, 1000)
        }
    }
    window.onload = star;
</script>

这里添加console.log('star')和img.onload=function(){}还有，ctx.clearRect(0, 0, 10000, 10000)
这几个点看不懂，上面canvas画布的定义和这里设置的矩形框有什么区别？是类似photoshop里面图层的概念吗？
第二句是不是用图片加载完以后再触发后面这段函数代码的意思吗？
setInterval计时器用法这里我看明白了。

望老师指教。

代码为什么会发生这个情况？

我想问一下，能不能把计时器单独放出来，不放在img.onload=function(){}可以吗？如果可以的话里面应该怎么写？

谢谢