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

大神帮看一下这段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条回答 默认 最新

  • Go 旅城通票 2017-05-04 13:12
    关注

    for (var i=0,i<360,i++)因为你语法都错完了,导致整个代码块错误,根本没执行 var can=document.getElementById("canvas");
    var ctx=can.getContext("2d");
    var w=can.width=window.innerWidth;
    var h=can.height=window.innerHeight;
    这代码设置canvas的width/height

                    for (var i=0,i<360,i++)
                    ===>
                    for (var i=0;i<360;i++)
    

    而且你for循环执行rotate没什么效果,和直接执行ctx.rotate(360*Math.PI/180);一样了。。用计时器来做

      <style>
            #canvas{
                background:#000;
            }
        </style> 
    
    <img id="earth" src="earth.png" style="display:none" />
    
    <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() {
            console.log('star')
    
            ctx.translate(400, 400);
    
            var img = new Image();
            img.src = 'earth.png';
            img.onload = function () {
                var i = 0;
                setInterval(function () {
                    ctx.save();
                    ctx.clearRect(0, 0, 10000, 10000)
                    ctx.rotate(i * Math.PI / 180)
                    ctx.drawImage(img, 180, 0, 50, 50);
                    i++
                    if (i >= 360) i = 0
                    ctx.restore();
                }, 1000)
            }
        }
        window.onload = star;
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题