Question

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

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

Answer 1

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

   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 );
      }
   }

Answer 2

您无法专注于canvas元素，意味着您的keydown事件将无效。这是一个小工作

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);
}

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

2 个答案: