0

我目前在加载图像和在画布中绘制时遇到问题。在 localhost 中，它运行顺利，但是当放到我的网络服务器上时，它根本不像 localhost 那样运行顺利。我需要将第二页刷新到树时间然后它才能工作。那么是否有其他方法来处理这个问题。以下是我的示例代码

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 的图像

4

1 回答 1

1

在开始绘制到画布之前，您需要等到所有图像都加载完毕。

这是一个如何在最后一张图像加载后立即调用函数的示例。

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 complete 函数。也许你会想要一个超时或什么的......

于 2012-12-15T17:10:08.730 回答