关于javascript里面函数的问题。

Question

<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');
                var img=new Image();
                img.src='earth.png';
                img.onload=function(){
                    var time=0;
                    ctx.save();
                    ctx.translate(600,400);
                    ctx.rotate(time*(360/365)*Math.PI/180);
                    ctx.drawImage(img,180,0,60,60);
                    time++;
                    ctx.restore();
                }
            }
            star();

</script>


上面这段函数想用star();来调用，原本想让<img id="earth"src="earth.png"style="display:none" />加载的图片按固定轨迹运行，用img.onload=function(){}来调用执行，但为什么感觉好像程序里面的time++并没有执行，而是执行了一次就停止了。
有什么方法能让加载的图片按固定轨道运行，然后在下方用setInterval();来刷新达到运动的效果。

没有运行的根本是不是因为函数作用域的关系？

希望各位大神指点一下。

Answer 1

https://zhidao.baidu.com/question/490688601480527492.html