HTML5 Canvas her konturla yavaşlar ve temizler

HTML5 Canvas ile geziniyorum ve çevrimiçi bir çözüm bulamadığım bir şey farkettim. İşteHTML5 Canvas her konturla yavaşlar ve temizler

<!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>

ile ben, çizmek o tamamlar katlanarak yavaşlatmak gibi görünüyor hızını her bastığınızda oynuyorum basit kod. Bunun neden olduğunu bilen var mı?

En çok IE'yi yavaşlatır. Chrome, her bir tıklama tıklamasıyla daha hızlı bir şekilde tamamlanmış gibi görünüyor, ancak yine de bir hız düşüşünü kesinlikle fark edebilirsiniz.

kaynak

2012-03-04 user852367

<canvas> öğesi geçerli bir yolu (yani, nokta, çizgi ve eğri kümesi) izler. canvas.moveTo, canvas.lineTo ve canvas.stroke tümü geçerli yol üzerinde çalışır. Her zaman canvas.moveTo veya canvas.lineTo'u aradığınızda geçerli yola ekliyorsunuz. Yol gittikçe karmaşıklaştıkça, çizim yavaşlar ve yavaşlar.

Yolu, canvas.beginPath() numaralı telefonu arayarak temizleyebilirsiniz. Bunu, draw fonksiyonunuzun başlangıcında yapmak, yavaşlamadan kurtulmalıdır.

kaynak

2012-03-04 23:05:26

Mükemmel! Benim için de bir çekicilik gibi çalıştı :) – psousa

Ayrıca, context.stroke(); Daha iyi bir optimizasyon için for döngüsü dışındaki işlev. Yolları oluşturun, ardından birden çok kez yerine hepsini bir defada inme yapın. – jackrugile

Bunun için teşekkürler! Tuval için W3Schools belgelerinde, yolunuzu kapatmanın önemini belirtmemişti, ama 30 saniyeden sonra yaptığım oyunda tarayıcıyı tam anlamıyla öldürüyordum. – Unome

HTML5 Canvas her konturla yavaşlar ve temizler

cevap

İlgili konular