Javascript - 캔버스에 대한 이미지 개체 배열 만들기

Question

이미지 객체 배열을 만들고 캔버스에 창을로드 한 후 이미지를로드하려고했습니다.

var canvasObj = document.getElementById('myCanvas'); 
var ctx = canvasObj.getContext('2d'); 
var imgsrcs = ["1.png", "2.png", "3.png"]; 
var imgs = []; 
for(var i=0; i<imgsrcs.length; i++){ 
    imgs[i] = new Image(); 
    imgs[i].onload = function() { 
     ctx.drawImage(imgs[i], xb,yb); 
    } 
    imgs[i].src = imgsrcs[i]; 
} 

그러나, 나는 콘솔에서이 오류를 얻고있다 :

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap. 
ctx.drawImage(imgs[i], xb,yb); 

내가 잘못 뭐하는 거지 여기

내 코드? onload 이벤트가 호출 될 때 사전

Answer 1

에

덕분 for-loop는 undefined가 ctx.drawImage

먼저 인수로 전달하고, 인덱스 length+1에 어떠한 요소가 없기 때문에 i의 값이 length+1이며 따라서 반복됨 drawImage 메서드에서 this 컨텍스트를 사용하십시오. 여기서 this === Image-Object

대답과 통찰력을위한

var canvasObj = document.getElementById('myCanvas'); 
 
var ctx = canvasObj.getContext('2d'); 
 
var imgsrcs = ["http://i.imgur.com/gwlPu.jpg", "http://i.imgur.com/PWSOy.jpg", "http://i.imgur.com/6l6v2.png"]; 
 
var xb = 0, 
 
    yb = 0; 
 
var imgs = []; 
 
for (var i = 0; i < imgsrcs.length; i++) { 
 
    imgs[i] = new Image(); 
 
    imgs[i].onload = function() { 
 
    console.log(imgs[i]); //Check this value 
 
    ctx.drawImage(this, xb, yb); 
 
    xb += 50; 
 
    yb += 50; 
 
    } 
 
    imgs[i].src = imgsrcs[i]; 
 
}

<canvas id="myCanvas"></canvas>