Question

我正在使用＆＃39; drawImage（）＆＃39;我的JS文件中的HTML5方法在屏幕上绘制图像。但是图像没有显示在屏幕上。我使用以下代码。我不明白我在这里做了什么错。没有在控制台上发现错误。

如果有人可以帮助我，那就太好了。

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，width，height参数有效，用于加载图像drawImage的代码就可以了。所以仔细检查你的参数drawImage的有效性。

我特别看到您使用areaBox.top，但未使用areaBox.height - 仅height。

HTML5 Canvas DrawImage方法

1 个答案: