加快在html5畫布中加載和繪製多個圖像

我目前在加載圖像和在畫布中繪製時出現問題。在本地主機上，它工作的很順利，但是當放到我的Web服務器上時，它根本不像本地主機那樣流暢。我需要刷新第二頁樹時間然後它的工作。那麼是否有其他方法可以解決這個問題。下面是我的示例代碼加快在html5畫布中加載和繪製多個圖像

function action1() { 
var imgObj = new Image() 
timer = setInterval(function(){ 
     imgObj.src = 'img/velOpen/' + (index++) + '.png'; 
     imgObj.onload = function(){ 
       context.clearRect(0,0, context.canvas.width, context.canvas.height); 
       context.drawImage(imgObj, X, y); 
     } 
     },100); 
};

注：我有藪貓圖片，只有32 KB

來源

2012-12-15 Pon Somean

也許在加載頁面時加載圖像一次，真的只做繪圖功能？ – pimvdb

您需要等到所有圖像加載你開始畫到畫布前的大小。

下面是如何在最後一次加載圖像後立即調用函數的示例。

function loadImageGroup(urls, onCompleteFunc) { 
    var numImagesNotYetLoaded = urls.length; 
    var urlToImageMap = {};  
    var markLoaded = function() { 
     if (--numImagesNotYetLoaded == 0) 
      onCompleteFunc(urlToImageMap); 
    } 

    for (var i = 0; i < urls.length; i++) { 
     var img = new Image(); 
     img.onload = markLoaded; 
     img.src = urls[i]; 
     urlToImageMap[urls[i]] = img; 
    } 
} 
var urls = [ 
    'http://www.google.com/images/srpr/logo3w.png' 
    , 'http://www.google.com/images/icons/product/chrome-48.png' 
]; 
loadImageGroup(urls, function(urlToImageMap) { 
    //all are loaded. draw to canvas here 
    var imgObject = urlToImageMap['http://www.google.com/images/srpr/logo3w.png']; 
    alert(imgObject.width) 
});

http://jsfiddle.net/vHwKr/1/

這只是一個樣本。我說這是因爲它不完全健壯。想象一下，如果圖像由於某種原因未能加載 - on函數將永遠不會被調用。也許你會想要一個超時或什麼...

來源

2012-12-15 17:10:08 goat

加快在html5畫布中加載和繪製多個圖像

回答

相關問題