加快在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画布中加载和绘制多个图像

回答

相关问题