基于HTML5 Canvas的按键编码检测器

陈小峰_iefreer

于 2014-11-23 11:04:33 发布

阅读量2.3k

点赞数

分类专栏： Javascript html5 文章标签： canvas html5 按键编码 javascript

本文链接：https://blog.csdn.net/iefreer/article/details/41408883

版权

html5 同时被 2 个专栏收录

85 篇文章 1 订阅

订阅专栏

Javascript

29 篇文章 0 订阅

订阅专栏

通过keyup事件传递的变量，我们可以很容易的获取到用户所按下的按键编码。

然后绘制在Canvas元素上，通过简单的辅助函数，同时输出按键的10进制和16进制编码。

function d2h(d) {
    return d.toString(16);
}

function h2d(h) {
    return parseInt(h, 16);
}

$().ready(function() {
    var c = $('canvas');

    c.attr('width', window.innerWidth);
    c.attr('height', window.innerHeight);
    c.drawText({
        strokeStyle: '#FFFFFFF',
        fontFamily: 'monospace',
        fontSize: '28',
        x: window.innerWidth / 2,
        y: window.innerHeight / 2,
        text: 'Press a key to get a code.'
    });

    $(document).keyup(function(e) {
        c.clearCanvas();
        c.drawText({
            strokeStyle: '#561395',
            fontFamily: 'monospace',
            fontSize: '28',
            x: window.innerWidth / 2,
            y: window.innerHeight / 2,
            text: 'KeyCode: ' + e.which + ' (0x' + d2h(e.which) + ')'
        });
    });
});

在线演示地址： http://wow.techbrood.com/fiddle/3151