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

How to move an <img> element in JavaScript?

本文关键字：元素 img 移动 JavaScript      更新时间：2023-09-26

有人可以帮助我查看我的代码吗？我正在尝试在画布内移动图像，但它不会移动。我的代码可能是错误的。有人可以帮我吗？谢谢！

<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>

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

您有两个问题，如下所示。检查工作演示 - 小提琴（首先单击右下角的任意位置以在此处设置焦点）：

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

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

相关文章：