canvas 方向键控制图片流畅移动

requestanimationframe、keydown、keyup的使用

首选创建画布

<canvas id="canvas" width="700" height="600"></canvas>

获取画布

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//动画
function animation(){
    if (direction == -1) {
        //向左移动动画
    } else if (direction == 1) {
        //向右移动动画
    }
    //这里写要执行的动画
    requestAnimationFrame(animation);
}
animation();
//键盘绑定事件
var direction = 0
document.addEventListener('keydown', function (evt) {
    switch (evt.which) {
        case 37:  // left
            direction = -1;
            break;
        case 39:  // right
            direction = 1;
            break;
    }
    document.addEventListener('keyup', function (evt) {
        if ((evt.which == 37 && direction < 0) ||
            (evt.which == 39 && direction > 0)) {
            direction = 0;
        }
    });
});