关于javascript里面函数的问题。

<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();来刷新达到运动的效果。

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

希望各位大神指点一下。

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

要使用定时器，你现在这么写只是在加载页面时执行一次。 定时器 setintervals(star(), 1000) 每隔1秒执行一次star方法·1.

之前不是写好给你了，你没用计时器执行你的代码，而且要注意清空画布，要不之前的图片会显示出来

    function star() {
        console.log('star');
        var img = new Image();
        img.src = 'earth.png';
        img.onload = function () {
            var time = 0;///

            setInterval(function () {
                ctx.clearRect(0, 0, w, h);//清空canvas整个画布
                ctx.save();
                ctx.translate(600, 400);
                ctx.rotate(time * (360 / 365) * Math.PI / 180);
                ctx.drawImage(img, 180, 0, 60, 60);
                time++;
                ctx.restore();
            }, 100/*移动速度修改这个参数，单位为毫秒，这里是100ms绘制一次*/)
        }
    }