javascript - 如何在 JavaScript 中移动 <img> 元素？

Question

有人可以帮助我并查看我的代码吗？ 我试图在 Canvas 中移动图像，但它不会移动。我的代码可能是错误的。有人能帮助我吗？谢谢!

<script>
var canvas;
var canvasContext;

var framesPerSecond = 30;

var posX = 10;
var posY = 10;

window.onload = function(){
    canvas = document.getElementById("playGround");
    canvasContext = canvas.getContext("2d");
    setInterval(drawEverything(), 1000/framesPerSecond);
    canvas.addEventListener("keydown", moveImg);
}

function drawEverything(){
    colorRect(0,0,canvas.width,canvas.height,"black");
    drawImage("mario",posX,posY);
}

function drawImage(id, x, y){
    var img = document.getElementById(id);
    canvasContext.drawImage(img,x,y,30,30);
}

function colorRect(x, y, width, height, color){
    canvasContext.fillStyle = color;
    canvasContext.rect(x,y,width,height);
    canvasContext.stroke();
}

function moveImg(evt){
    switch(evt.keyCode) {
        // Left arrow key pressed
        case 37:
            posX-=5;
            break;
        // Up Arrow Pressed
        case 38:
            posY-=5;
            break;
        // Right Arrow Pressed
        case 39:
            posX+=5;
            break;
        // Down Arrow Pressed
        case 40:
            posY+=5;
            break;
    }};
 </script>

我在网上查看了答案，但似乎找不到任何东西。也许我有语法问题？

Answer 1

您有以下两个问题。检查工作演示 - Fiddle (首先单击右下部分的任意位置将焦点设置在那里):

1. Canvas 没有焦点，因此必须将 canvas.addEventListener("keydown", moveImg); 更改为 document.addEventListener("keydown", moveImg);

2. 在 moveImg 函数中，您忘记根据按下的按键更新图像位置。在 switch 语句后添加 drawImage("mario",posX,posY);。