无法在画布上绘制图像

Question

我在HTML标签中有一张图片

---

<img id="enemy" src="img/enemy.png" style="display: none;">

---

然后我像往常一样将其通过id放入变量中，然后通过

进行绘制

---

canvasContext.drawImage(enemy, enemyX, enemyY);

---

我已经设置好画布及其上下文（“ 2d”），并且可以在我向其投掷的所有东西中使用，但是无法在上面绘制上面的图像。我得到了错误

---

  

TypeError：CanvasRenderingContext2D.drawImage的参数1无法转换为以下任何一种：HTMLImageElement，SVGImageElement，HTMLCanvasElement，HTMLVideoElement，ImageBitmap。

---

Answer 1

这应该有效：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("enemy");
ctx.drawImage(img, 10, 10);

myCanvas在您的画布中。也许您没有在javascript中获得图片元素。

Answer 2

我自己找到了答案，这非常令人困惑，因为我发现问题在所有浏览器中仍然存在，并且仅当getElementById之后才声明canvasContext时才有效，但是我可以接受。 否则，JavaScript上的图片应构造为

---

var img = new Image();
img.src = "folder/image.png";

---

无需将图像附加到HTML。