Así que estoy tratando de trabajar en un Lienzo de demostración, y quiero que esta cuadrado para mover de un lado para el otro, pero no puedo averiguar cómo llamar JavaScript en una forma que se repite cada 60 segundos.

Aquí es lo que tengo hasta el momento:

<!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>
InformationsquelleAutor William | 2010-06-13

2 Comentarios

  1. 10
    <!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 segundo, 60000 = 60 segundos.

    • Correcto para la mayoría de propósitos. Es probable que, en ciertos navegadores, no va a ser precisos. Tengo un pedazo de código que se ejecuta una función cada n segundos, poco a poco se deteriora en Internet Explorer. Si usted necesita precisión, ejecutar el temporizador con más frecuencia y compruebe la diferencia de tiempo de forma manual.
    • <body onLoad=»setInterval(update(), 1000);»> Este no parece funcionar (I. E. no tuve ningún movimiento desde la plaza del todo). Estoy haciendo algo mal?
    • no invocar automáticamente con (), he actualizado mi respuesta.
    • Sí. setInterval("update();", 1000); debe trabajar muy bien. (Nótese las comillas. W/S de ellos, es una actualización llamada a la función. Así que, efectivamente, se está pasando el valor de retorno de update a setTimeout.)
    • No, no uso de esas citas, ya que la cadena necesita obtener eval sitúa por cada vez. Sólo uso setInterval(update, 1000); lugar. Ahora contiene una referencia a una función en lugar de una cadena.
  2. 1

    Usar setTimeout, en lugar de setInterval, permite detener la animación con clearTimeout y el uso de una variable.

    (edit: todo esto no funciona en IE, pero el setTimeout – clearTimeout combinado en sí debe… también se ha cambiado el onload y eventos 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>   
    • citando a la llamada de función = eval = badbadbad, utilizar un literal de función.
    • Decir en el setTimeout? ¿Cómo hacerlo w literal de una función? Siempre me encuentro con problemas con setTimeout recursividad y literales…. El «Stop» y «Start» botones son sólo para la simplicidad con onclick, en lugar de los funcionales de los literales de la <script>
    • Se puede hacer un nuevo post con tu problema de la recursividad?
    • Whoops. No estoy seguro de lo que estaba pensando. Me parece recordar que tiene problemas con setTimeout en el pasado. Supongo que estaba equivocado. He cambiado el código de arriba.

Dejar respuesta

Please enter your comment!
Please enter your name here