无法在画布上检测keydown

时间：2013-03-09 21:40:00

标签： canvas keydown

我无法让我的keydown事件监听器检测到键输入。

我试过了：

  • 向画布添加标签索引
  • 鼠标悬停在画布上移动时添加焦点的鼠标悬停监听器
  • 将canvas.focus（）添加到keydown例程
  • 可能与其无关的各种其他东西

据我所知，我的代码看起来就像我在网上各个地方找到的例子，所以我不知道问题，也许是简单的事情。

如果相关，控制台也会说“evt未定义”。

我会在这里粘贴整个代码，因为我不知道什么是相关的，什么不相关，但事件监听器就在底部。其余的创建我的小三角形花花公子并面向鼠标指针，所以有一些事件正在进行，而不是按下键。

感谢您提供的任何帮助！

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>


<style>
body{
margin:0;
}

canvas {
border: solid 1px black;
position:relative;
}

#holder {
display:block;
margin: 100px auto 0 auto;
width:800px;
height:600px;
}
</style>

</head>

<body>
<div id = "holder">
<canvas id="canvas" width="800" height="600" tabindex='1'></canvas>
</div>

<script>
(function(window) {

// define variables
var canvas, c;
var WIDTH;
var HEIGHT;
var INTERVAL = 20; 
var mouseX, mouseY;
var mousePos;

// set up canvas
canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

// initial canvas background 
 c.beginPath();
 c.fillStyle = "rgb(45,133,222)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // Player coords and initial location
 function Player () {
 this.x = 400;
 this.y = 300;
 this.w = 20;
 this.h = 20;
 this.xcenter = 400;
 this.ycenter = 300;
 this.angle = 0.9;
 this.fill = '#000000';
 } 
 var Player1 = new Player();

 // game loop interval
 setInterval(mainDraw, INTERVAL);

 // clear canvas function
  function clear(c) {
  c.clearRect(0, 0, WIDTH, HEIGHT);
}

 // drawing function / game loop
  function mainDraw(canvas, message) {

// get the angle between the player coords and the mouse coords  
deltaX = mouseX - Player1.x;
deltaY = mouseY - Player1.y;
var newAngle = Math.atan(deltaY / deltaX);

 // clear the canvas and draw the background again
 clear(c);
 c.beginPath();
 c.fillStyle = "rgb(45,133,22)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // draw the player with the new angle so that it faces the mouse
 c.beginPath();
 c.save();
 c.translate(Player1.x,Player1.y);
 if (deltaX < 0) {
 c.rotate(newAngle);
 }
 else {
 c.rotate(newAngle);
 c.scale(-1,1);
 }
 c.translate(-Player1.x,-Player1.y);
 c.fillStyle = "#000000";
 c.moveTo(Player1.x - 15, Player1.y);
 c.lineTo(Player1.x + 15, Player1.y + 10);
 c.lineTo(Player1.x + 15, Player1.y - 10);
 c.lineTo(Player1.x - 15, Player1.y);
 c.fill();
 c.restore();
 c.closePath();


 }


// focus on the canvas on mouseover to detect key input
var handlefocus=function(e){ 
 if(e.type=='mouseover') 
 { 
 canvas.focus(); return false;
 } 
 else if (e.type=='mouseout')
 { 
 canvas.blur(); return false; 
 } 
 return true; 
}; 
canvas.addEventListener('mouseover',handlefocus,true);  


 // Detect mouse movement and assign to mouseX, mouseY
function mouseMove(e)
{
    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}
canvas.addEventListener('mousemove', mouseMove, true);

// Detect key press for movement
function playerMove(evt)
canvas.focus()
alert('keycode: ' + evt.keyCode);
{
 if ( evt.keyCode == 87 ) {
   Player1.y = Player1.y + 1;
 }

 if ( evt.keyCode == 83 ) {
    Player1.y -= 1;
 }

 if ( evt.keyCode == 65 ) {
    Player1.x -= 1;
 }

 if ( evt.keyCode == 68 ) {
    Player1.x += 1;
 }
 return false;
}
canvas.addEventListener('keydown', playerMove, true);

 })(window);

</script>



</body>

</html>

1 个答案:

答案 0 :(得分：1)

你非常接近！

你不小心将 canvas.addEventListener（'keydown'，playerMove，true）; 放在了playerMove函数中，因此从未设置过事件监听器。

此外，你有一些缺少大括号，你需要触发onload事件来运行你的函数（我在你的body标签中放了一个init（）触发器。）

以下是您的代码 - 略有改动：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<style>
body{
margin:0;
}

canvas {
border: solid 1px black;
position:relative;
}

#holder {
display:block;
margin: 100px auto 0 auto;
width:800px;
height:600px;
}
</style>

<script>
function init() {
console.log("start");

// define variables
var canvas, c;
var WIDTH;
var HEIGHT;
var INTERVAL = 20; 
var mouseX, mouseY;
var mousePos;

// set up canvas
canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

// initial canvas background 
 c.beginPath();
 c.fillStyle = "rgb(45,133,222)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // Player coords and initial location
 function Player () {
 this.x = 400;
 this.y = 300;
 this.w = 20;
 this.h = 20;
 this.xcenter = 400;
 this.ycenter = 300;
 this.angle = 0.9;
 this.fill = '#000000';
 } 
 var Player1 = new Player();

 // game loop interval
 setInterval(mainDraw, INTERVAL);

 // clear canvas function
  function clear(c) {
  c.clearRect(0, 0, WIDTH, HEIGHT);
}

 // drawing function / game loop
  function mainDraw(canvas, message) {

// get the angle between the player coords and the mouse coords  
deltaX = mouseX - Player1.x;
deltaY = mouseY - Player1.y;
var newAngle = Math.atan(deltaY / deltaX);

 // clear the canvas and draw the background again
 clear(c);
 c.beginPath();
 c.fillStyle = "rgb(45,133,22)";
 c.rect(0,0,800,600);
 c.fill();
 c.closePath();

 // draw the player with the new angle so that it faces the mouse
 c.beginPath();
 c.save();
 c.translate(Player1.x,Player1.y);
 if (deltaX < 0) {
 c.rotate(newAngle);
 }
 else {
 c.rotate(newAngle);
 c.scale(-1,1);
 }
 c.translate(-Player1.x,-Player1.y);
 c.fillStyle = "#000000";
 c.moveTo(Player1.x - 15, Player1.y);
 c.lineTo(Player1.x + 15, Player1.y + 10);
 c.lineTo(Player1.x + 15, Player1.y - 10);
 c.lineTo(Player1.x - 15, Player1.y);
 c.fill();
 c.restore();
 c.closePath();


 }


// focus on the canvas on mouseover to detect key input
var handlefocus=function(e){ 
 if(e.type=='mouseover') 
 { 
 canvas.focus(); return false;
 } 
 else if (e.type=='mouseout')
 { 
 canvas.blur(); return false; 
 } 
 return true; 
}; 
canvas.addEventListener('mouseover',handlefocus,true);  


 // Detect mouse movement and assign to mouseX, mouseY
function mouseMove(e)
{
    if(e.offsetX) {
        mouseX = e.offsetX;
        mouseY = e.offsetY;
    }
    else if(e.layerX) {
        mouseX = e.layerX;
        mouseY = e.layerY;
    }
}
canvas.addEventListener('mousemove', mouseMove, true);

// Detect key press for movement
function playerMove(evt){
canvas.focus()
alert('keycode: ' + evt.keyCode);
{
 if ( evt.keyCode == 87 ) {
   Player1.y = Player1.y + 1;
 }

 if ( evt.keyCode == 83 ) {
    Player1.y -= 1;
 }

 if ( evt.keyCode == 65 ) {
    Player1.x -= 1;
 }

 if ( evt.keyCode == 68 ) {
    Player1.x += 1;
 }
 return false;
}


}
canvas.addEventListener('keydown', playerMove, true);

}
</script>

</head>

<body onload="init()">
<div id = "holder">
<canvas id="canvas" width="800" height="600" tabindex='1'></canvas>
</div>
</body>

</html>
相关问题
最新问题