HTML5 Canvas DrawImage 메서드

Question

내 JS 파일에 HTML5의 drawImage() 메서드를 사용하여 화면에 이미지를 그립니다. 그러나 이미지가 화면에 표시되지 않습니다. 다음 코드를 사용하고 있습니다. 내가 여기서 뭘 잘못하고 있는지 이해하지 못한다. 콘솔에 오류가 없다.

누군가가 나를 도울 수 있다면 정말 좋을 것 ..

Code to draw Image(failed) 
========================= 
var image = new Image();  
image.onload = function() { 
console.log("Image has loaded"); 
// body.appendChild(image); 
ctx.drawImage(image,leftStart,areaBox.top+height/4,20, height/2); 
}; 

image.src = "/MyProject/resources/base/images/close.png"; 

또한 나는으로 strokeRect() 메소드를 사용하여 사각형 상자를 그립니다 수 있습니다.

Code to draw rectangle (success) 
================================ 


ctx.strokeRect(leftStart, areaBox.top + height/4, 20, height/2); 

leftStart는 X 좌표입니다. (areaBox.top + height/4)는 Y 좌표입니다. 마지막 두 매개 변수는 너비와 높이입니다.

leftStart : 1500

areaBox.top : 39

높이 : 45

Answer 1

의 drawImage 당신의 X, Y, 폭, 높이 매개 변수로 한 괜찮 이미지를로드에 대한 귀하의 코드 drawImage가 유효합니다. 따라서 drawImage의 유효성을 확인하기 위해 매개 변수를 다시 확인하십시오.

특히 나는 areaBox.top을 사용하지만 areaBox.height - 단지 height을 사용하지 않는 것으로 나타났습니다.