HTML5圖像緩衝區

我是一名JavaScript初學者程序員。我不使用jQuery！我想做一個簡單的遊戲。HTML5圖像緩衝區

我使用

imageObj.onload加載多個圖像轉換成畫布=函數（）{}

我使用多個按鍵一個的KeyListener使得圖像可以在同時按下向上和向左按鍵的同時按對角線移動，如下所示：

函數keydown_handler（e）{my_key [String.fromCharCode（e.keyCode）] = true;移動（）;}

我的問題是，當我按下鍵並移動畫布上的圖像時，圖像閃爍。我想這是因爲它每次按下按鍵都會加載圖像。如果這是真的，我如何將圖像加載到內存中，然後從內存中調用該圖像並更改它的座標？

謝謝！

來源

2011-12-23 Vlad Otrocol

請包括您正在用於移動圖像的一段代碼。在我們看到您使用的是什麼實際代碼之前，我們無法評論。 – jfriend00

對於沒有jQuery的+1。 – John

當涉及動畫時，你指的是一個非常普遍的問題。這個問題與存儲在內存中的內容較少有關，更重要的是每次改變動畫時必須重新繪製動畫的方式。避免這種閃爍問題的最常用方法稱爲雙緩衝。

我從來沒有做過使用HTML5的具體內容，但經過快速搜索，我發現這篇文章可能會對您有所幫助。

https://stackoverflow.com/a/2864533/594558

來源

2011-12-23 23:40:43

非常感謝！我並不完全理解你推薦的文章中解釋的內容，但是對於我建議的雙緩衝教程進行了深入研究，並發現這是非常有用的：http://www.felinesoft.com/blog/index.php/ 2010/09 /加速遊戲編程與 - HTML5和帆布/ –

那麼，你真正需要做的是創建一個使用requestAnimationFrame（）的JavaScript渲染循環，並與canvas元素呈現。下面是用HTML5渲染的一個非常基本的例子：

<!DOCTYPE html> 
<html> 
    <body> 
     <canvas id="gameCanvas" width="800px" height="600px"></canvas> 
     <script type="text/javascript"> 
      var canvas = document.getElementById('gameCanvas'); 
      var context = canvas.getContext('2d'); 
      var myImage = new Image(); 
      var myImage.onload=function(){init();}; 
      var myImage.src='location/of/image.png'; 
      var imageX = 0, imageY = 0; 

      function render() 
      { 
       window.requestAnimationFrame(render); 

       // clear canvas 
       canvas.width = canvas.width; 

       context.drawImage(myImage, imageX, imageY); 

       imageX++; 
       imageY++; 
      } 

      function init() 
      { 
       window.requestAnimationFrame(render); 
      } 
     </script> 
    </body> 
</html>

永遠不會有閃爍，當你通過渲染一張畫布，因爲瀏覽器已經是雙緩衝使渲染表面;並手動雙緩衝畫布實際上會導致幀率明顯下降。您可能遇到的情況（如果您通過畫布進行渲染）正在撕裂框架。使用requestAnimationFrame將通過本質上同步渲染來解決撕裂問題（因爲它一直等到代碼執行結束時才渲染）。

希望這會幫助您開始使用HTML5呈現的正確路徑。

來源

2011-12-24 00:18:44 ceprovence

HTML5圖像緩衝區

回答

相關問題