youxizhizuo22222
2017-05-04 12:03
采纳率: 33.3%
浏览 963
已采纳

大神帮看一下这段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的画布大小就变成了默认的画布大小了。
本来想做一个地球图片然后按弧度旋转的动画,应该用什么样的思路去做?

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

谢谢先了。

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

3条回答 默认 最新

相关推荐 更多相似问题