시간 초과 캔버스 drawimage 루프

Question

나는 캔버스 개체와 약간의 스트리밍 클라이언트를 작성하려고합니다.

이 필요한 코드 :

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

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

이 잘 작동! 이미지가 표시됩니다. 그러나 그것은 내가 원하는 것이 아닙니다.

FPS 한도를 설정하고 싶습니다. 그래서 나는이 루프에서 1000ms/프레임의 "sleep"을 가질 필요가있다.

나는 SetInterval 또는 SetTimeOut을 사용하여 몇 가지 방법을 시도했다. 그러나 그들 중 누구도 나를 위해 일하지 못했습니다. 나는 반복하기 전에 실제 날짜 시간을 저장하고 timedifference가 1000MS에 도달 정확히 내가 사진을로드하고 난을 증가하는 것을 시도하고있다

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; 
     } 
    } 

:

그래서 난 내 자신의 잠을 작성했습니다.

내 문제 : this.addPicture 대신 alert (i)를 사용하면 정상적으로 작동합니다! 매주 1000ms (매초)마다 경고음이 발생합니다.

위 예제 (this.addPicture)를 사용하면 브라우저를로드 할 때까지 페이지를로드 할 수 없다는 오류가 표시됩니다. 그러나 나는 어떤 그림도 보지 않는다! 그렇지 AddPicture 입력과 경고와 함께 작동하지만 왜

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

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

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

아무도 알고 있나요 : 여기

내 AddPicture 입력 기능입니까? 왜냐하면 나는 타임 스탬프 (첫 번째 코드 예제)를 사용하지 않기 때문에 잘 동작한다.

Answer 1

ctx.drawImage에서 imageObj 다음의 2 개의 인수는 이미지 크기가 아닌 X/Y입니다.

이미지를로드하는 데 충분한 시간이 필요합니다 (1 초는 시간이 충분하지 않습니다).

귀하의 추가 사진 은 이미지을로드하기 시작합니다 (하지만 완료되지는 않았지만). 그러나 이미지는 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 

}