0

Dentro de este canvas

<canvas id="canvas" class="canvas" width="300" height="300"></canvas>

Tenga esta función

var estado = false;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
function frame(){
  actualizar();
  coliciones();
  dibujar();
  bucle = requestAnimationFrame(frame);

}

function startStop(){
  if (!estado) {
    estado = true;
    frame();
      console.log('game init :'+estado);
  }else {
    estado = false;
    cancelAnimationFrame(bucle);
    console.log('game estatus :'+estado);
  }

pero cancelAnimationFrame no borra o no hace un clear a mi canvas. Pero si estoy recibiendo los log's de mi consola, alguien podrìa decime si hago algo mal?

3
  • cancelAnimationFrame no limpia el canvas,para la animación, Para borrar utiliza clearRect
    – enxaneta
    el 30 nov. 2018 a las 21:15
  • pero si debe de detener la animación no? como puedo saber si mu animación se detiene? el 1 dic. 2018 a las 20:28
  • 1
    Tienes razón: a veces es difícil saber que la animación se ha parado. Una solución sería añadir bucle="null" después de cancelAnimationFrame(bucle); Si bucle devuelve null es que se ha parado.Pero todo depende de lo que quieres conseguir, La vedad es que necesitaría un ejemplo funcional para poder decir algo más,
    – enxaneta
    el 1 dic. 2018 a las 21:11

1 respuesta 1

0

La animación no se detiene porque llamas a RequestAnimationFrame al final de la función frame(). Para detener la animación desde otra función, o simplemente finalizar la animación, debes ubicar bucle = requestAnimationFrame(frame); al inicio de la aplicación.

function frame(){
  bucle = requestAnimationFrame(frame);
  actualizar();
  coliciones();
  dibujar();
}

Para limpiar el lienzo, escribe después de bucle = requestAnimationFrame(frame); el comando ctx.clearRect(0, 0, canvas.width, canvas.height);. El siguiente código lo resuelve:

function frame(){
      bucle = requestAnimationFrame(frame);
      
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      actualizar();
      coliciones();
      dibujar();
    }

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.