如何使預初始化的數組內容工作，而array.push（）？

Question

爲什麼不能在這裏顯示的數組中定義圖像。 爲什麼每次都需要在數組中推入一個新的Image對象？

var canvas = null; 
var ctx = null; 
var assets = [ 
    '/media/img/gamedev/robowalk/robowalk00.png', 
    '/media/img/gamedev/robowalk/robowalk01.png', 
    '/media/img/gamedev/robowalk/robowalk02.png', 
    '/media/img/gamedev/robowalk/robowalk03.png', 
    '/media/img/gamedev/robowalk/robowalk04.png', 
    '/media/img/gamedev/robowalk/robowalk05.png', 
    '/media/img/gamedev/robowalk/robowalk06.png', 
    '/media/img/gamedev/robowalk/robowalk07.png', 
    '/media/img/gamedev/robowalk/robowalk08.png', 
    '/media/img/gamedev/robowalk/robowalk09.png', 
    '/media/img/gamedev/robowalk/robowalk10.png', 
    '/media/img/gamedev/robowalk/robowalk11.png', 
    '/media/img/gamedev/robowalk/robowalk12.png', 
    '/media/img/gamedev/robowalk/robowalk13.png', 
    '/media/img/gamedev/robowalk/robowalk14.png', 
    '/media/img/gamedev/robowalk/robowalk15.png', 
    '/media/img/gamedev/robowalk/robowalk16.png', 
    '/media/img/gamedev/robowalk/robowalk17.png', 
    '/media/img/gamedev/robowalk/robowalk18.png' 
]; 

var frames = []; 
var onImageLoad = function() { 
    console.log("IMAGE!!!"); 
}; 
var setup = function() { 
    j=0; 
    body = document.getElementById('body'); 
    canvas = document.createElement('canvas'); 
    ctx = canvas.getContext('2d'); 
    canvas.width = 100; 
    canvas.height = 100; 
    body.appendChild(canvas); 
    for (i = 0; i <= assets.length - 1; ++i) {  
     frames[i].src = assets[i]; 
    } 
    setInterval(animate,30); 
} 

var animate = function() { 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    if (j >= assets.length) { 
     j=0; 
    } 
    var image = new Image(); 
    image.src = frames[j]; 
    ctx.drawImage(image,0,0); 
    ++j; 
}  

Answer 1

第一個原因是減少延遲。僅將URL放入數組意味着圖像在動畫開始之前未被預取。由於每張圖像都是從網上獲取的，因此第一輪動畫會變得緩慢而不平穩。如果動畫重複，下一輪將會更快。 這個考慮主要適用於替換頁面上的圖像元素（在DOM中）而不是寫入畫布的動畫。

第二個原因是消除開銷並提高動畫循環的效率。在循環中使用new Image()意味着每幀的繪製時間包括創建一個新的Image對象以及在畫布上繪製它所花費的時間。 此外，圖像內容只能在畫布取出後才寫入畫布，因此必須從連接到圖像對象的onload處理程序寫入畫布。發佈的代碼不會執行此操作，並且可能會在嘗試同步將沒有數據的圖像寫入畫布的某些瀏覽器中引發錯誤。即使成功，重複動畫也會在每次顯示幀並攪動內存使用時創建一個新的Image對象。

請注意原始版本可能使用onImageLoad來檢查圖像何時已完全加載從網站將對象推入預先加載的圖像對象的數組之前。這是預取動畫圖像的首選方法。

並且不要忘記在使用之前定義j :-)