HTML5 캔버스와 drawImage

Question

Im 다이어그램 편집기를 작성하고 잘 작동합니다. & 드롭을 복사하고 복사하면 모든 것이 올바르게 작동합니다. 그러나 이미지가있는 som 문제가있는 Im. 렌더링() 함수는 매번 변경 사항이있을 때마다 실행됩니다. render 함수 안에서 appendImg 코드를 호출합니다. 이것은 렌더링이 처음 실행될 때 완벽하게 작동합니다. 그러나 다음에 다른 코드 블록에 들어가서 이미지가 캔버스에 렌더링되지 않습니다. 나는이 if.else 논리를 가지고 있기 때문에 나는 img.onload를 실행할 때마다 매번 변경된 이미지가 매번로드되고 화면에 깜박임이 많다. img obj가 배열과 함께 저장되어있을 때 drawImage dosent를 볼 수있는 한 그 주위에 머리를들이는 것처럼 보입니다.

var images = []; //An array where images are stored. 

appendImg = function(inx, url, x, y, w, h) { 

    if (!images[inx]) { 
    var img = new Image(); 
    img.onload = function() 
    { 
     dg_context.drawImage(img, x, y, w, h); 
     images[inx] = img; 
    } 
    img.src = url; 
    }else{ 
    var img = images[inx]; 
    console.log(img); 
    dg_context.drawImage(img, x, y, w, h); 
    } 
} 

Answer 1

하는 것은 너무 INX는 온로드 내부에 기억 될 수있는 IMG의 속성으로 INX를 저장하십시오 :

var images = []; //An array where images are stored. 

appendImg = function(inx, url, x, y, w, h) { 

    if (!images[inx]) { 
    var img = new Image(); 
    img.onload = function() 
    { 
     dg_context.drawImage(img, x, y, w, h); 
     images[img.index] = img; 
    } 
    img.index=inx; 
    img.src = url; 
    }else{ 
    var img = images[inx]; 
    console.log(img); 
    dg_context.drawImage(img, x, y, w, h); 
    } 
}