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 坐標。 最后兩個參數是寬度和高度。

左開始：1500

areaBox.top: 39

身高：45

Answer 1

只要 drawImage 的 x,y,width,height 參數有效，您加載圖像的代碼就可以了。 因此，請仔細檢查您的參數以確保 drawImage 的有效性。

特別是我看到你使用areaBox.top但你不使用areaBox.height --just height 。