我正在慢慢学习一些基本的 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;
}
}
最佳答案
您无法将焦点放在 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);
}
关于javascript - 似乎无法通过关键事件更改图像位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18820214/