ブログでHTML5 Canvas キーボードイベント

keyupイベント

キーボードのキーが離された時のイベントを拾ってみましょう。

<canvas id="keyUpEventDemoCanvas" width="300" height="200"></canvas>
<script src="http://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1371908340">
</script>

onKeyUp.js

    (function () {
        var canvas = document.getElementById("keyUpEventDemoCanvas");
        canvas.containsMouse = function (mousePosition) {
            var clientRect = this.getBoundingClientRect();
            return clientRect.left < mousePosition.x
                && mousePosition.x < clientRect.right
                && clientRect.top < mousePosition.y
                && mousePosition.y < clientRect.bottom;
        };
        var mousePosition = new Object();

        document.addEventListener(
            "mousemove",
            function (e) {
                mousePosition.x = e.clientX;
                mousePosition.y = e.clientY;
            }
            );

        document.addEventListener(
            "keyup",
            function (e) {
                if (canvas.containsMouse(mousePosition)) {
                    alert("key up");
                }
            });
    })();

上のcanvas（空白）の中でキーを離してみて下さい。
メッセージボックスが表示されます。

このプログラムはやや、ややこしいです（冗談ではありません）。
なぜこうなってしまったのかというと、マウスイベントとキーボードイベント両方を聴いているからです。
実は、canvasのキーボードイベントは、聴けないようなのです。
そこでcanvasではなくdocumentのキーボードイベントを聞くわけですが、そうするとページすべてでキーが押されたかどうかを聴くことになってしまいます。
ブログだとそれでは少しまずいです。
キーボードイベントを聴くキャンバスがもし2つあったら？
なんだかややこしいことになりそうですね。

そこでここでは、今マウスが上にあるキャンバスでだけ、メッセージボックスを表示するようにしています。