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

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

  • 已采纳

    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>
    
    点赞 打赏 评论
  • youxizhizuo22222 2017-05-04 14:24

    这里添加console.log('star')和img.onload=function(){}还有,ctx.clearRect(0, 0, 10000, 10000)
    这几个点看不懂,上面canvas画布的定义和这里设置的矩形框有什么区别?是类似photoshop里面图层的概念吗?
    第二句是不是用图片加载完以后再触发后面这段函数代码的意思吗?
    setInterval计时器用法这里我看明白了。

    望老师指教。

    点赞 打赏 评论
  • youxizhizuo22222 2017-05-05 04:23

    代码为什么会发生这个情况?

    我想问一下,能不能把计时器单独放出来,不放在img.onload=function(){}可以吗?如果可以的话里面应该怎么写?

    谢谢

    点赞 打赏 评论

相关推荐 更多相似问题