холст drawimage loop с таймаутами

Question

Я пытаюсь написать небольшой потоковый клиент с объектом canvas.

Это необходимый код:

this.drawPictures = function() { 
    var i = 0; 

    while (i <= 3000) { 
     this.addPicture("Pictures/Wildlife/" + i + '.bmp', 1, 1); 
     i = i + 4; 
    } 
} 

Это прекрасно работает! Изображения будут отображаться. Но это не то, что я хочу.

Я хочу установить лимит FPS. Поэтому мне нужно «спать» в 1000 мс/кадров в этом цикле.

Я пробовал некоторые методы с SetInterval или SetTimeOut. Но никто из них не работал для меня.

Так что я попытался написать свой собственный сон:

var i = 0; 
    timeStart = new Date().getTime(); 

    while (i <= 3000) { 
     timeNow = new Date().getTime(); 
     timeDifference = timeNow - timeStart; 
     if (timeDifference > 1000*i) { 
      this.addPicture("Pictures/Wildlife/" + i + '.bmp', 1, 1); 
      i = i + 1; 
     } 
    } 

Я сохранить фактический DATETIME перед циклом и точно, когда timedifference достигает 1000 мс Я пытаюсь загрузить изображение и увеличиваем I.

Моя проблема: Когда я делаю это с предупреждением (i), а не this.addPicture, он отлично работает! Я получаю предупреждение каждые 1000мс (каждую секунду)

Когда я делаю это как пример выше (с этим.addPicture), браузер просто загружает себя, пока я не получаю сообщение об ошибке, что страница не может быть загружена. Но я не вижу никаких фотографий!

Вот моя addPicture функция:

this.addPicture = function (cPicPath, nSizeX, nSizeY) { 

    var imageObj = new Image(); 
    imageObj.onload = function() { 

     ctx.drawImage(imageObj, nSizeX, nSizeY); 
    } 
    imageObj.src = cPicPath; 
} 

Кто-нибудь знает, почему он работает с боевой готовности, но не с addPicture? Потому что, когда я не использую timestamps (первый пример кода), он отлично работает!

Answer 1

В вашем ctx.drawImage 2 аргумента после imageObj X/Y не размер изображения.

Необходимо указать время, необходимое на загрузку изображения (требуется 1 секунда).

Ваш addPicture запускает (но не заканчивает) загрузку изображения, но изображение не полностью загружается к тому времени, когда addPicture вызывается снова.

Есть много изображений грузчиков там ... вот один:

var imageURLs=[]; // put the paths to your images here 
var imagesOK=0; 
var imgs=[]; 
imageURLs.push("myPicture1.png"); 
imageURLs.push("myPicture2.png"); 
imageURLs.push("myPicture3.png"); 
imageURLs.push("myPicture4.png"); 
loadAllImages(start); 

function loadAllImages(callback){ 
    for (var i=0; i<imageURLs.length; i++) { 
     var img = new Image(); 
     imgs.push(img); 
     img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length) { 
       callback(); 
      } 
     }; 
     img.onerror=function(){alert("image load failed");} 
     img.crossOrigin="anonymous"; 
     img.src = imageURLs[i]; 
    }  
} 

function start(){ 

    // the imgs[] array holds fully loaded images 
    // the imgs[] are in the same order as imageURLs[] 
    // Start your timer and display your pictures with addPicture 

}