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 。