window.addEventListener（'keydown', function(e){ ... }, false）;
// 監視整個視窗

document.addEventListener（'keydown', function(e){ ... }, false）;
// 監視文件

因為 canvas 沒有可以使用的監視鍵盤事件
所以要使用 JavaScript 判斷 keydown 的事件
addEventListener(event, function, useCapture)
type -> 監聽的 event type 名稱
function -> 函式
useCapture -> 布林值 [預設: false 可寫可不寫]

按下按鍵時觸發的事件

window.addEventListener('keydown', function(e){
  console.log(e.code)
}, false);

先用 console 找到按下的按鍵是什麼

• e.code -> 像是 a 就會是 'KeyA' 英文上的數字5 = 'Digit5'
• e.key -> 大小寫英文字、加按 Shift 的特殊符號
• e.keyCode -> 用數字代表的按鍵

再用 if 驗證 keycode 是不是一樣的才開始動作
成功的話就會像下圖的方塊移動位置

var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
var txt = document.getElementById('text');

var x = 100;
var y = 100;

ctx.fillRect(x, y, 10, 10);
window.addEventListener('keydown', function(e){  
  var keyID = e.code;
  
  if(keyID === 'KeyW')  {
      ctx.clearRect(0, 0, 500, 500);
      y = y - 5;
      txt.innerText = 'keydown W';
      ctx.fillRect(x, y, 10, 10);
      e.preventDefault();
  }
  if(keyID === 'KeyD')  {
      ctx.clearRect(0, 0, 500, 500);
      x = x + 5;
      txt.innerText = 'keydown D';
      ctx.fillRect(x, y, 10, 10);
      e.preventDefault();
  }
  if(keyID === 'KeyS')  {
      ctx.clearRect(0, 0, 500, 500);
      y = y + 5;
      txt.innerText = 'keydown S';
      ctx.fillRect(x, y, 10, 10);
      e.preventDefault();
  }
  if(keyID === 'KeyA')  {
      ctx.clearRect(0, 0, 500, 500);
      x = x - 5;
      txt.innerText = 'keydown A';
      ctx.fillRect(x, y, 10, 10);
      e.preventDefault();
  }
}, false);