如何優化畫布上的動畫？ HTML 5

Question

我面臨一個問題，即減慢畫布上的動畫，因爲各種圖片左右移動，上下移動。我需要關於如何優化動畫的建議。

動畫適用於所有主要瀏覽器，尤其是Chrome，Firefox和Internet Explorer，這一點非常重要。

可以優化動畫嗎？也許延遲繪圖？先謝謝你。

Answer 1

在javascript中，您可以使用setInterval和setTimeout函數創建延遲並限制幀頻。

例如，如果你想使你的繪圖循環大約30 FPS，你可以有一些代碼，看起來像這樣：

function draw(){ 

     var canvas = document.getElementById('myCanvas'); 
     //create the image object 
     var img = new Image(); 
     //set the image object's image file path 
     var img.src = "images/myImage.png" 
     //check to see that our canvas exists 
     if(canvas.getContext) 
     { 
      //grab the context to draw to. 
      var ctx = cvs.getContext('2d'); 
      //clear the screen to a white background first 
      //NOTE to make this faster you can clear just the parts 
      //of the canvas that are moving instead of the whole thing 
      //every time. Check out 'Improving HTML5 Canvas Performance' 
        //link mention in other post 
      ctx.fillStyle="rgb(255,255,255)"; 
      ctx.fillRect (0, 0,512, 512); 

      //DO ALL YOUR DRAWING HERE.... 

      //draw animation 
      ctx.drawImage(img, 0, 0); 
     } 
     //Recalls this draw update 30 times per second 
     setTimeout(draw,1000/30); 
} 

這將幫助你控制動畫多少的處理時間服用。因此，如果您發現動畫速度太慢，您可以通過將分母「30」更改爲「60」fps或任何真正適合您的程序的任何內容來增加幀速率。

就setTimeout（）的優化而言，您繪製動畫的方式也非常重要。嘗試在渲染它們之前加載所有圖像，這稱爲「預加載」。也就是說，如果你有一堆不同的圖像的每個動畫細胞，然後你打電話給你繪製函數的所有圖像加載到圖像陣列像這樣前：

var loadedImages = new Array(); 
loadedImages[0] = new Image(); 
loadedImages[0].src = "images/animationFrame1.png"; 
loadedImages[1] = new Image(); 
loadedImages[1].src = "images/animationFrame2.png"; 
loadedImages[2] = new Image(); 
loadedImages[2].src = "images/animationFrame3.png"; 
loadedImages[3] = new Image(); 
loadedImages[3].src = "images/animationFrame4.png"; 

你甚至可以把他們在，如果它的哈希讓你感覺應用，在那裏，而不是

loadedImages[0] = new Image(); 
loadedImages[0].src = "images/animationFrame1.png"; 

你這樣做

loadedImages['frame1'] = new Image(); 
loadedImages['frame1'].src = "images/animationFrame1.png"; 

一旦你把所有的圖片加載，可以參考他們做調用它們像這樣畫：

//Using the integer array 
ctx.drawImage(loadedImages[0], 0, 0); 
//OR 
//Using the stringed hash 
ctx.drawImage(loadedImages['frame1'], 0, 0); 

你想你的加載過程從渲染過程分開，因爲加載圖像是工藝精深因此會減緩你的動畫下來如果要加載的東西，而渲染。

這並不是說你不能在渲染時加載任何東西，但相反只是良心，這會減慢動畫的速度。

Here是一篇關於預加載圖像的文章。

有對這裏的另一個帖子裏面所有的瀏覽器談到一致動畫速度here

注意link刊登的綠色格子答案

要注意的是確保其他的事情，只清除和重繪使用HTML 5畫布優化在文章中提到的邊界框。該鏈接在開發畫布動畫時有一些非常好的技巧。

Here一些幀作品，以及它可能會派上用場過比較，你在做什麼其他引擎在做什麼。

希望這可以幫助一些。我是新來的JavaScript（纔開始用它的編碼約2周前），因此有可能是更好的方式來做事，但這些是我迄今發現的東西。

Answer 2

此鏈接解釋了一些HTML 5和帆布優化，並給出性能結果的幾個瀏覽器：http://www.html5rocks.com/en/tutorials/canvas/performance/

Answer 3

window.requestAnimationFrame（）是一個肯定的方式，使您的動畫運行更順暢。

https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

（跨瀏覽器http://paulirish.com/2011/requestanimationframe-for-smart-animating/）

但是它不能解決你的繪製代碼可能的問題，這是從問題丟失。