不能使方块在画布上移动，现在广场也不会绘制 [英] Can't make square on canvas move, and now the square won't draw either

问题描述

我不知道该怎么做，所以我查了一些代码，和大约2个小时后，我想出了自己的非工作代码。它不工作，但至少它正在绘制我的广场...或者是。

现在不是，我没有线索为什么，这里是我的JavaScript：

  function initCanvas（）{
 var ctx = document.getElementById（'my_canvas'）。getContext 2d'）; 
 ctx.addEventListener（keydown，move，true）; 
 
 function move（event）{
 // W 
 if（event.keyCode == 87）{
 y = y + 20; 
} 
 // A 
 else if（event.keyCode == 65）{
 x = x  -  20; 
} 
 
 // S 
 else if（event.keyCode == 83）{
 y = y + 20; 
} 
 
 // D 
 else if（event.keyCode == 68）{
 x = x + 20; 
} 
} 
 
 var x = 0; 
 var y = 0 
 
 ctx.fillStyle =green; 
 ctx.fillRect（x + 20，y + 20，20，20）; 
 
} 
 
 window.addEventListener（'load'，function（event）{
 initCanvas（）; 
}）; 
  

和HTML / CSS（整个页面）： http://pastebin.com/wjXv5tdK
它可能与事件监听器有关，因为它似乎没有它工作。

TL; DR

所以我基本上想要在画布上绘制一个正方形，

解决方案

在文档上侦听键盘事件，而不是上下文。

  document.addEventListener（keydown，move，false）; 
  

以下是一些注释代码，让您重新开始：

  //创建画布相关的变量varar canvas = document.getElementById（canvas）; var ctx = canvas.getContext（2d）; var cw = canvas.width; var ch = canvas .height; //将canvas设置为一个制表符（必须赋予它焦点）canvas.setAttribute（'tabindex'，'0'）; //将焦点设置为canvascanvas.focus（）; //创建一个x& ; y指示在哪里绘制rectvar x = 150; var y = 150; //绘制第一个timedraw（）的rect; //监听文档上的keydown事件//画布不触发事件eventsdocument.addEventListener（ keyey，handleKeydown，false）; // handle key eventsfunction handleKeydown（e）{//如果画布没有聚焦，//让一些其他元素处理这个键事件if（e.target.id！=='canvas '）{return;} //改变x，y基于哪个键是down开关（e.keyCode）{case 87：x + = 20;打破; // W case 65：x- = 20;打破; //案例83：y + = 20;打破; // S case 68：y- = 20;打破; // D} //重绘画布draw（）;} //清除画布，然后在其新的x，y位置函数中重绘矩形draw（）{ctx.clearRect（0,0，cw，ch）; ctx.fillRect（x，y，20,20）;}  

  body {background-color：ivory; padding：10px; } #canvas {border：1px solid red;}  

  ; h4>点击画布以使其响应键< / h4>< canvas id =canvaswidth = 300 height = 300>< / canvas>   

I am trying to make an already drawn square move with the WASD keys.

I wasn't sure how to do this, so I looked up some code, and after about 2 hours came up with my own non-working code. It wasn't working, but at least it was drawing my square... Or was.

Now it isn't, and I have no clue why, here's my JavaScript:

    function initCanvas(){
    var ctx = document.getElementById('my_canvas').getContext('2d');
    ctx.addEventListener("keydown", move, true);

    function move(event){
            //W
            if(event.keyCode == 87){
                    y = y + 20;
            }
            //A
            else if(event.keyCode == 65){
                    x = x - 20;
            }

            //S
            else if(event.keyCode == 83){
                    y = y + 20;
            }

            //D
            else if(event.keyCode == 68){
                    x = x + 20;
            }  
    }

    var x = 0;
    var y = 0;

    ctx.fillStyle = "green";
    ctx.fillRect(x + 20, y + 20, 20, 20);

    }

 window.addEventListener('load', function(event){
    initCanvas();
 });

And HTML/CSS (entire page): http://pastebin.com/wjXv5tdK It probably has to do with the Event Listener because it seems to work without it.

TL;DR

So I basically want a square to be drawn on the canvas, and have the user control it using the WASD keys.

解决方案

Listen for keyboard events on the document, not the context.

document.addEventListener("keydown",move,false);

Here's some annotated code to get your started again:

// create canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// set canvas to be a tab stop (necessary to give it focus)
canvas.setAttribute('tabindex','0');

// set focus to the canvas
canvas.focus();

// create an x & y indicating where to draw the rect
var x=150;
var y=150;

// draw the rect for the first time
draw();

// listen for keydown events on the document
// the canvas does not trigger key events
document.addEventListener("keydown",handleKeydown,false);

// handle key events
function handleKeydown(e){

  // if the canvas isn't focused,
  // let some other element handle this key event
  if(e.target.id!=='canvas'){return;}

  // change x,y based on which key was down
  switch(e.keyCode){
    case 87: x+=20; break;  // W
    case 65: x-=20; break;  // A
    case 83: y+=20; break;  // S
    case 68: y-=20; break;  // D
  } 

  // redraw the canvas
  draw();
}

// clear the canvas and redraw the rect in its new x,y position
function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillRect(x,y,20,20);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<h4>Click in the canvas to have it respond to keys</h4>
<canvas id="canvas" width=300 height=300></canvas>

这篇关于不能使方块在画布上移动，现在广场也不会绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！