<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();来刷新达到运动的效果。
没有运行的根本是不是因为函数作用域的关系?
希望各位大神指点一下。