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条)

报告相同问题？

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？