在HTML5画布中创建关键事件的最佳方法是什么？

Question

请建议为HTML5画布创建关键事件的最佳方法。我不喜欢任何图书馆，但如果你认为这是最好的方式，那就去回答吧。提前谢谢！

Answer 1

这将返回密钥代码：

<canvas id="myCanvas" width="200" height="100" style="background:green"></canvas>
<script type="text/javascript">
window.addEventListener('keydown',this.check,false);

function check(e) {
    alert(e.keyCode);
}
</script>

如果您希望根据键显示不同的事情：

function check(e) {
    var code = e.keyCode;
    //Up arrow pressed
    if (code == 38)
        alert("You pressed the Up arrow key");
    else
        alert("You pressed some other key I don't really care about.");
}

或者，如果您有一长串要使用的密钥，请在交换机案例中执行：

function check(e) {
    var code = e.keyCode;
    switch (code) {
        case 37: alert("Left"); break; //Left key
        case 38: alert("Up"); break; //Up key
        case 39: alert("Right"); break; //Right key
        case 40: alert("Down"); break; //Down key
        default: alert(code); //Everything else
    }
}

Answer 2

如果您要在<canvas>本身（而不是window或document）上设置关键事件处理，请在<canvas>元素上设置tabindex。请注意，画布需要专注于捕获关键事件。

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>

这是在Processing.js网站上完成的。

如果您不想在单击画布时显示边框，请将其样式设置为outline: none。

Answer 3

我正在编写一个Canvas游戏，我使用默认的.addEventListener并转换它附带的event.keyCode。此外，我不会在Canvas元素上监听其自身的关键事件，而只是将监听器设置为窗口。

window.addEventListener('keyup',keyUpListener,false);
window.addEventListener('keydown',keyDownListener,false); 

Answer 4

类的用法：

var CONTROL = MOBILE_CONTROL();

看看这堂课：

function MOBILE_CONTROL (){

      this.X =  null;
      this.Y =  null;
      this.LAST_X_POSITION = null;
      this.LAST_Y_POSITION = null;
      this.MULTI_TOUCH = 'NO';
      this.MULTI_TOUCH_X1 = null;  
      this.MULTI_TOUCH_X2 = null;
      this.MULTI_TOUCH_X3 = null;
      this.MULTI_TOUCH_X4 = null;
      this.MULTI_TOUCH_X5 = null;
      this.MULTI_TOUCH_Y1 = null;
      this.MULTI_TOUCH_Y2 = null;
      this.MULTI_TOUCH_Y3 = null;
      this.MULTI_TOUCH_Y4 = null;
      this.MULTI_TOUCH_Y5 = null;
      this.MULTI_TOUCH_X6 = null;  
      this.MULTI_TOUCH_X7 = null;
      this.MULTI_TOUCH_X8 = null;
      this.MULTI_TOUCH_X9 = null;
      this.MULTI_TOUCH_X10 = null;
      this.MULTI_TOUCH_Y6 = null;
      this.MULTI_TOUCH_Y7 = null;
      this.MULTI_TOUCH_Y8 = null;
      this.MULTI_TOUCH_Y9 = null;
      this.MULTI_TOUCH_Y10 = null;
      this.MULTI_TOUCH_INDEX = 1;
      this.SCREEN = [window.innerWidth , window.innerHeight]; 
      this.SCREEN.W = this.SCREEN[0];
      this.SCREEN.H = this.SCREEN[1];
      //Application general
      this.AUTOR = "Nikola Lukic";
      this.APPLICATION_NAME = "mobile multi touch , system plugin for visual js .";


    }

    var CONTROL = new MOBILE_CONTROL();


    document.addEventListener('touchstart', function(event) 
    { 

    if (CONTROL.MULTI_TOUCH == 'NO') {
        var touch = event.touches[0];
        CONTROL.X = touch.pageX;
        CONTROL.Y = touch.pageY;
        console.log('TOUCH START AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );

    }
    else if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(CONTROL.MULTI_TOUCH_INDEX)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
      CONTROL.MULTI_TOUCH_INDEX = CONTROL.MULTI_TOUCH_INDEX + 1;


      }
    }
    CONTROL.MULTI_TOUCH = 'YES';

    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener('touchmove', function(event) 
    { 
    var touch = event.touches[0];
    CONTROL.X = touch.pageX;
    CONTROL.Y = touch.pageY;
    console.log('TOUCH MOVE AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    //#############
     if (CONTROL.MULTI_TOUCH == 'YES') {
      var touches_changed = event.changedTouches;

       for (var i=0; i<touches_changed.length;i++) {

       //CONTROL.MULTI_TOUCH_X1
      console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
      switch(i)
    {
    case 1:
      CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
      break;
    case 2:
      CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
      break;
    case 3:
      CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
      break;
    case 4:
      CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
      break;
    case 5:
      CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
      break;
    case 6:
      CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
      break;
    case 7:
      CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
      break;
    case 8:
      CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
      break;
    case 9:
      CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
      break;
    case 10:
      CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
      CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
      break;
    default:
      //code to be executed if n is different from case 1 and 2
    }
    }}
    //#############
    event.preventDefault();
    },false);
    //////////////////////////////////////////////////////// 
    document.addEventListener('touchend', function(event) 
    { 
    CONTROL.LAST_X_POSITION = CONTROL.X;  
    CONTROL.LAST_Y_POSITION = CONTROL.Y; 
    CONTROL.MULTI_TOUCH = 'NO';
    CONTROL.MULTI_TOUCH_INDEX = 1;
    CONTROL.MULTI_TOUCH_X1 = null;
    CONTROL.MULTI_TOUCH_X2 = null;
    CONTROL.MULTI_TOUCH_X3 = null;
    CONTROL.MULTI_TOUCH_X4 = null;
    CONTROL.MULTI_TOUCH_X5 = null;
    CONTROL.MULTI_TOUCH_X6 = null;
    CONTROL.MULTI_TOUCH_X7 = null;
    CONTROL.MULTI_TOUCH_X8 = null;
    CONTROL.MULTI_TOUCH_X9 = null;
    CONTROL.MULTI_TOUCH_X10 = null;
    CONTROL.MULTI_TOUCH_Y1 = null;
    CONTROL.MULTI_TOUCH_Y2 = null;
    CONTROL.MULTI_TOUCH_Y3 = null;
    CONTROL.MULTI_TOUCH_Y4 = null;
    CONTROL.MULTI_TOUCH_Y5 = null;
    CONTROL.MULTI_TOUCH_Y6 = null;
    CONTROL.MULTI_TOUCH_Y7 = null;
    CONTROL.MULTI_TOUCH_Y8 = null;
    CONTROL.MULTI_TOUCH_Y9 = null;
    CONTROL.MULTI_TOUCH_Y10 = null;
    console.log('LAST TOUCH POSITION AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
    },false);
    ////////////////////////////////////////////////////////
    document.addEventListener("touchcancel", function(event) 
    { 
    console.log('BREAK - LAST TOUCH POSITION AT:(X' + CONTROL.X + '(,(' + CONTROL.Y + ')' );
    }, false);
    ////////////////////////////////////////////////////////