無法檢測到canvas上的keydown

我無法讓我的keydown事件偵聽器檢測到鍵輸入。無法檢測到canvas上的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>

來源

2013-03-09 FlyingLizard

你差得很近！

你不小心把canvas.addEventListener（'keydown'，playerMove，true）; playerMove函數內部的，所以事件監聽器永遠不會被設置。

而且，你有幾個缺少括號，你需要觸發onload事件來運行你的函數（我把一個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>

來源

2013-03-09 23:06:19 markE

真棒 - 感謝！我認爲這可能是這樣的。 – FlyingLizard 2013-03-10 16:41:49

無法檢測到canvas上的keydown

回答

相關問題