似乎无法使用关键事件更改图像位置

Can't seem to change image position with key event

本文关键字：事件 图像 位置      更新时间：2023-09-26

我正在慢慢学习一些基本的HTML 5和Javascript。我写了一个Javascript文件，它应该显示一个图像，然后按右键改变图像的位置。 图像加载，但当我按右键时，它不会改变位置。 我做错了什么？

var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
canvas.style  = "border:2px solid blue";
canvas.addEventListener('keydown', doKeyDown, true);
var ctx = canvas.getContext("2d");
document.body.appendChild( canvas );
var guy1Image = new Image();
guy1Image.onload = function () {
   ctx.drawImage( guy1Image, x, y );
};
guy1Image.src = "img/1.png";
var x = 0;
var y = 0;
function doKeyDown( e ) {
  if ( e.keyCode == 39 ) {
 x = 128;
     y = 128;
  }
}

您无法将焦点放在画布元素上，这意味着您的键控事件将不起作用。这里有一些解决方法

var lastDownTarget;
window.onload = function() {
    document.addEventListener('mousedown', function(event) {
        lastDownTarget = event.target;
        alert('mousedown');
    }, false);
    document.addEventListener('keydown', function(event) {console.log(lastDownTarget)
        if(lastDownTarget == canvas) {
            alert('keydown');
        }
    }, false);
}

在按键下清除画布并再次重绘：）

   function doKeyDown( e ) {
      if ( e.keyCode == 39 ) {
         var canvas=document.getElementsByTagName("canvas");
         var ctx = canvas.getContext("2d");
         ctx.clearRect( 0, 0, 800, 600 );
         x = 128;
         y = 128;
         ctx.drawImage( guy1Image, x, y );
      }
   }
相关文章：