Question

在我正在研究的项目中，一项核心功能是能够使用WASD键在HTML5 Canvas元素周围移动图像。由于默认键盘行为的性质，我决定使用Keydrown库移动图像。不幸的是，由于我不是一个经验丰富且经验丰富的程序员，所以这个目标被证明有点障碍。这是我当前的代码：

 var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var xPos = -1320;
    var yPos = -495;
       ctx.beginPath()
       ctx.fillStyle="#FF0000"
       ctx.arc(400, 225, 30, 0, 2*Math.PI)
       ctx.stroke()
       ctx.fill()
    // Create the image object
    var background = new Image();
    
    // Add onload event handler
    background.onload = function () {
    // Done loading, now we can use the image
    ctx.drawImage(background, xPos, yPos);
    };
    
    function move(e){
    
    /*if(e.keyCode==68){
        xPos-=10;
    }
    if(e.keyCode==65){
        xPos+=10;
    }
    if(e.keyCode==87){
        yPos+=10;
    }
    if(e.keyCode==83){
        yPos-=10;
    }*/
    
    kd.D.down(function () {
     xPos-=10;
     console.log(xPos)
    })
    kd.A.down(function () {
     xPos+=10
    })
    kd.W.down(function () {
     yPos+=10
    })
    kd.P.down(function () {
     yPos-=10
     })
     kd.run(function () {
      kd.tick();
    })
    canvas.width=canvas.width;
    ctx.drawImage(background, xPos, yPos);
    
    }
    
    //document.onkeydown = move;
    
    background.src = "https://wallpapertag.com/wallpaper/full/8/1/8/399576-synthwave-wallpaper-3440x1440-screen.jpg";

    <script src="https://jeremyckahn.github.io/keydrown/dist/keydrown.js"></script>

    <img id="wallpaper" width="3440" height="1440"
    src="https://wallpapertag.com/wallpaper/full/8/1/8/399576-synthwave-wallpaper-3440x1440-screen.jpg" alt="img" style="display:none;">
    
    
    <canvas id="myCanvas" width="800" height="450"
    style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
    </canvas>

任何帮助将不胜感激。预先谢谢你。

Answer 1

首先，您不应使用canvas.width = canvas.width。而是使用类似clearRect(0, 0, canvas.width, canvas.height)的名称。

要使用键盘移动某些东西，您必须执行以下操作：

document.addEventListener("keydown", (e) => {
  if (e.keyCode == 68) {
    xPos -= 10;
  }
  if (e.keyCode == 65) {
    xPos += 10;
  }
  if (e.keyCode == 87) {
    yPos += 10;
  }
  if (e.keyCode == 83) {
    yPos -= 10;
  }
});

您错过的是在文档中添加事件侦听器，以检查是否按下了键。

希望这会有所帮助！

如何使用Keydrown在画布上移动图像

1 个答案: