Question

所以我正在尝试使用Canvas演示，我希望这个方块从一侧移动到另一侧，但我无法弄清楚如何以每60秒重复一次的方式调用JavaScript。 / p>

这是我到目前为止所得到的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>

        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
        </script>

    </head>

    <body onLoad="setTimeout(update(), 0);">
        <canvas id="screen1" width="500" height="500"></canvas>
    </body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>


    </head>

    <body>
        <canvas id="screen1" width="500" height="500"></canvas> 
        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
            update();
            setInterval ( update, 60000 );
        </script>
    </body>
</html>

1000ms = 1秒，60000 = 60秒。

Answer 2

使用setTimeout而不是setInterval，可以使用clearTimeout和变量的使用来停止动画。

（编辑：整个事情在IE中不起作用，但是setTimeout - clearTimeout组合本身应该......也改变了onload和onclick事件）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />
        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>
        <script type="text/javascript">             
            var x = 50;
            var y = 250;
            function update()
            {
                draw();
                x = x + 5;
                // For one minute, you would use 60000 instead of 100.
                // 100 is so you can actually see it move.
                myToggle = setTimeout(update, 100);
            };
            function draw()
            {
                var canvas = document.getElementById('screen1');
                if (canvas.getContext)
                {
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = 'rgb(236,138,68)';
                    ctx.fillRect(x,y,24,24); 
                }
            };
            function stop()
            {
                clearTimeout(myToggle);
            };
            window.onload = function() 
            {                    
                document.getElementById("stop").onclick = function() { stop(); };
                document.getElementById("start").onclick = function() { update(); };
                update();
            };
        </script>
    </head>
    <body>
        <canvas id="screen1" width="500" height="500"></canvas><br/>           
        <input id="stop" type="button" value="Stop" /><br/>
        <input id="start" type="button" value="Start" /> 
    </body>
</html>

如何每60秒调用一次JavaScript函数？

2 个答案: