Javascript 如何用图像而不是矩形替换my Drumenemy函数的主体？

我想把一个图像，而不是红色的矩形，在我的功能，吸引敌人

function drawEnemy(x,y){
    ctx.fillStyle= "red";
    ctx.fillRect(x,y,50,50); 

}

这是我尝试运行它的时间间隔/循环：

var timer = setInterval(function(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);  
    ctx.fillStyle= "yellow";
    ctx.fillRect(xPos,yPos,10,150);    
    drawPikachu(x,y);  
    drawEnemy(enemyX, enemyY);
    yPos -= moveY;
    enemyY -= enemyMoveY;
    if(enemyY > drawSurface.height ||
      collisionCheck(enemyX,enemyY,enemySize,xPos,yPos,30)) {
        enemyY = -50;
        enemyX = Math.ceil(Math.random()*(drawSurface.width-50));
    }        
},50)

---

)

一个简单的谷歌，找到了一个看似合适的答案：

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,10,10);
};

资料来源：

---

您只需获取图像的引用，并使用画布上下文绘制图像。

绘制图像时需要上下文引用：

// prepare your enemy sprite once    
var enemyImg = document.getElementById('enemy');

function drawEnemy(x, y, ctx) {
  // desired dimensions of the enemy sprite
  var width = 100
  var height = 100
  // draw enemy sprite
  ctx.drawImage(enemyImg, x, y, width, height);
}

---

我不知道你的ctx是什么，但这就是你要找的吗。你贴的是什么伪代码？因为它不是一个成熟的Java方法。您编写的更像javascript；ctx=drawSurface.getContext（“2d”）<代码>document.getElementById（“画布”）是JavaScript而不是Java。除此之外，请在您的帖子中添加更多信息，以帮助他人帮助您。好的，是HTML/JS。我相应地更新了你的标签。现在，对JS有更多了解的人应该能够找到您的问题，而之前它被标记为Java。请接受更改。将图像加载到DOM中只是为了将其绘制到画布并不常见。更常见的是创建imageObject并将其绘制到画布：

var img=document.createElement（'image'）；img.onload=function（）{context.drawImage（img，x，y）；}

；-）@Kaido使用建设性的评论而不是讽刺。我认为在draw函数中调用缓慢的

document.getElementById（）

，这是一个坏主意，如果你想让它动画化（尽量少调用DOM）。