<!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的画布大小就变成了默认的画布大小了。
本来想做一个地球图片然后按弧度旋转的动画,应该用什么样的思路去做?
因为是新手,代码整体结构逻辑还是很多不明白的地方,希望有大神来指点一二。
谢谢先了。