0

現在、画像の読み込みとキャンバスへの描画に問題があります。localhost ではスムーズに動作しますが、Web サーバーに配置すると、 localhost ほどスムーズに動作しません。ページ 2 をツリー時間に更新する必要があります。これに対処する別の方法があります。以下は私のサンプルコードです

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 に答える