HTML5 Canvas se ralentiza con cada trazo y borre

He estado jugando con el HTML5 Canvas y he notado algo que no pude encontrar una resolución en línea. Aquí está el código simple que estoy jugando conHTML5 Canvas se ralentiza con cada trazo y borre

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <canvas id="canvas" style="border: 1px solid;" width="200" height="200"></canvas> 
    <br /> 
    <button id="draw">draw</button> 
    <button id="clear">clear</button> 
</body> 
</html> 

<script type="text/javascript"> 
    (function() { 
     var canvas = document.getElementById("canvas"); 
     var context = canvas.getContext("2d"); 
     $("#draw").bind("click", function() { 
      for (var i = 0; i < 200; i++) { 
       context.moveTo(0, i); 
       context.lineTo(100, 100); 
       context.stroke(); 
      } 
     }); 
     $("#clear").bind("click", function() { 
      context.clearRect(0, 0, 200, 200); 
     }); 
    }()); 
</script>

Cada vez que se presiona dibujar, la velocidad a la que se completa parece ir más despacio de manera exponencial. ¿Alguien podría saber por qué está sucediendo esto?

Se ralentiza más a través de IE. Chrome parece completarlo más rápido con cada clic de extracción, pero aún puede notar una reducción de velocidad.

Fuente

2012-03-04 user852367

El elemento <canvas> realiza un seguimiento de una ruta actual (es decir, conjunto de puntos, líneas y curvas). canvas.moveTo, canvas.lineTo y canvas.stroke operan todos en la ruta actual. Cada vez que llamas al canvas.moveTo o al canvas.lineTo estás agregando a la ruta actual. A medida que el camino se hace cada vez más complejo, el dibujo se vuelve cada vez más lento.

Puede borrar la ruta llamando al canvas.beginPath(). Hacer esto al comienzo de la función de dibujar debería deshacerse de la ralentización.

Fuente

2012-03-04 23:05:26

Perfecto !! Funcionó como un encanto para mí también :) – psousa

Además, puede mover context.stroke(); funcionar fuera del bucle for para una optimización aún mejor. Construye los caminos y luego acarícialos todos a la vez, en lugar de hacerlo varias veces. – jackrugile

¡Gracias por esto! En la documentación de W3Schools para canvas, realmente no especificaba la importancia de cerrar la ruta, pero estaba literalmente matando el navegador en un juego que estoy haciendo después de 30 segundos. – Unome

HTML5 Canvas se ralentiza con cada trazo y borre

Respuesta

Cuestiones relacionadas