Fatal编程技术网
  • canvas/
  • Canvas 在画布上检测按键关闭时出错

Canvas 在画布上检测按键关闭时出错

canvas

Canvas 在画布上检测按键关闭时出错,canvas,keydown,Canvas,Keydown,我无法让keydown事件侦听器检测密钥输入 我试过： 向画布添加选项卡索引 鼠标在画布上移动时添加焦点的鼠标悬停侦听器 将canvas.focus（）添加到keydown例程 其他各种可能与之无关的东西 就我所能看到的而言，我的代码看起来就像我在网上不同地方找到的示例，所以我不知道问题出在哪里，也许是一些简单的东西 如果相关的话，控制台也会说“evt未定义” 我将把整个代码粘贴到这里，因为我不知道什么相关，什么不相关，但事件侦听器就在底部。其余部分创建了我的小三角哥们儿，让他面对鼠标指针，

我无法让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> 


身体{
保证金：0；
}
帆布{
边框：实心1px黑色；
位置：相对位置；
}
#持有者{
显示：块；
保证金：100px自动0自动；
宽度：800px；
高度：600px；
}
（功能（窗口）{
//定义变量
var，c；
var宽度；
变异高度；
var区间=20；
var mouseX，mouseY；
var mousePos；
//设置画布
canvas=document.getElementById（“canvas”）；
c=canvas.getContext（“2d”）；
//初始画布背景
c、 beginPath（）；
c、 fillStyle=“rgb（45133222）”；
c、 rect（0,0800600）；
c、 填充（）；
c、 closePath（）；
//玩家坐标和初始位置
函数播放器（）{
这个.x=400；
这个y=300；
这是w=20；
这个h=20；
此.xcenter=400；
该中心=300；
该角度=0.9；
this.fill='#000000'；
} 
var Player1=新玩家（）；
//游戏循环间隔
设置间隔（主绘图、间隔）；
//清除画布功能
功能清除（c）{
c、 clearRect（0，0，宽度，高度）；
}
//绘图功能/游戏循环
函数mainDraw（画布、消息）{
//获取玩家坐标和鼠标坐标之间的角度
deltaX=mouseX-Player1.x；
deltaY=mouseY-Player1.y；
var newAngle=Math.atan（deltaY/deltaX）；
//清除画布并再次绘制背景
明确（c）；
c、 beginPath（）；
c、 fillStyle=“rgb（45133,22）”；
c、 rect（0,0800600）；
c、 填充（）；
c、 closePath（）；
//以新角度绘制玩家，使其面向鼠标
c、 beginPath（）；
c、 save（）；
c、 翻译（Player1.x，Player1.y）；
如果（deltaX<0）{
c、 旋转（新角度）；
}
否则{
c、 旋转（新角度）；
c、 比例（-1,1）；
}
c、 翻译（-Player1.x，-Player1.y）；
c、 fillStyle=“#000000”；
c、 移动到（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、 填充（）；
c、 恢复（）；
c、 closePath（）；
}
//关注鼠标上方的画布以检测按键输入
var handlefocus=函数（e）{
如果（e.type=='mouseover'）
{ 
canvas.focus（）；返回false；
} 
else if（e.type=='mouseout'）
{ 
canvas.blur（）；返回false；
} 
返回true；
}; 
canvas.addEventListener（'mouseover'，handlefocus，true）；
//检测鼠标移动并指定给mouseX、mouseY
函数mouseMove（e）
{
如果（e.offsetX）{
mouseX=e.offsetX；
mouseY=e.offsetY；
}
否则如果（如layerX）{
mouseX=e.layerX；
mouseY=e.layerY；
}
}
canvas.addEventListener（'mousemove'，mousemove，true）；
//检测按键是否移动
功能播放器移动（evt）
canvas.focus（）
警报（'keycode:'+evt.keycode）；
{
如果（evt.keyCode==87）{
Player1.y=Player1.y+1；
}
如果（evt.keyCode==83）{
Player1.y-=1；
}
如果（evt.keyCode==65）{
Player1.x-=1；
}
如果（evt.keyCode==68）{
Player1.x+=1；
}
返回false；
}
canvas.addEventListener（'keydown'，playerMove，true）；
})（窗口）；
你很接近

您不小心放置了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>


身体{
保证金：0；
}
帆布{
边框：实心1px黑色；
位置：相对位置；
}
#持有者{
显示：块；
保证金：100px自动0自动；
宽度：800px；
高度：600px；
}
函数init（）{
控制台日志（“启动”）；
//定义变量
var，c；
var宽度；
变异高度；
var区间=20；
var mouseX，mouseY；
var mousePos；
//设置画布
canvas=document.getElementById（“canvas”）；
c=canvas.getContext（“2d”）；
//初始画布背景
c、 beginPath（）；
c、 fillStyle=“rgb（45133222）”；
c、 rect（0,0800600）；
c、 填充（）；
c、 closePath（）；
//玩家坐标和初始位置
函数播放器（）{
这个.x=400；
这个y=300；
这是w=20；
这个h=20；
此.xcenter=400；
该中心=300；
该角度=0.9；
this.fill='#000000'；
} 
var Player1=新玩家（）；
//游戏循环间隔
设置间隔（主绘图、间隔）；
//清除画布功能
功能清除（c）{
c、 clearRect（0，0，宽度，高度）；
}
//绘图功能/游戏循环
函数mainDraw（画布、消息）{
//获取玩家坐标和鼠标坐标之间的角度
deltaX=mouseX-Player1.x；
deltaY=mouseY-Player1.y；
var newAngle=Math.atan（deltaY/deltaX）；
//清除画布并再次绘制背景
明确（c）；
c、 beginPath（）；
c、 fillStyle=“rgb（45133,22）”；
c、 rect（0,0800600）；
c、 填充（）；
c、 closePath（）；
//以新角度绘制玩家，使其面向鼠标
c、 beginPath（）；
c、 save（）；
c、 翻译（Player1.x，Player1.y）；
如果（deltaX<0）{
c、 旋转（新角度）；
}
否则{
c、 旋转（新角度）；
c、 比例（-1,1）；
}
c、 翻译（-Player1.x，-Player1.y）；
c、 fillStyle=“#000000”；
c、 移动到（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、 填充（）；
c、 恢复（）；
c、 closePath（）；
}
//关注鼠标上方的画布以检测按键输入
var handlefocus=函数（e