お絵かきできるSNSを作りたい！11

１つ前に戻す(日本語あってる？)を実装したのでついついやりたくなるCtrl+ZをWEBページに実装ます。
方法は簡単でページ全体に対してonkyedownイベントを付与するだけです。

document.onkeydown = function(e) { 
    var keycode,shift,ctrl,alt; 
    keycode = event.keyCode; 
    shift = event.shiftKey; 
    ctrl = event.ctrlKey; 
    alt = event.altKey; 
    event.cancelBubble = true; 
    keychar = String.fromCharCode(keycode).toUpperCase(); 
}

このサンプルでは、documentに対して付与しました。

あとで扱いやすいように以下の変数を宣言しています。
keycode→押された文字列を大文字にして格納
shift→Shiftを押されているかの判定用
ctrl→Ctrlを押されているかの判定用
alt→Altを押されているかの判定用

つまり、Ctrl+Zを押された場合は１つ前に戻す用のdoPrevCanvas関数を呼びたいのでこんな感じです。

document.onkeydown = function(e) { 
    var keycode,shift,ctrl,alt; 
    keycode = event.keyCode; 
    shift = event.shiftKey; 
    ctrl = event.ctrlKey; 
    alt = event.altKey; 
    event.cancelBubble = true; 
    keychar = String.fromCharCode(keycode).toUpperCase(); 
    if (ctrl) { 
        if (keychar == "Z") {
            doPrevCanvas();
        }
    }
}

これでCtrl+Zが出来ました。
どうせなのでもういくつかショートカットを作ろうと思います。

作ったショートカットは以下の通り。
Ctrl+Z→１つ前に戻す
Ctrl+上矢印キー→上レイヤー
Ctrl+下矢印キー→下レイヤー
Ctrl+左右矢印キー→線の太さ変更
Ctrl+スペースキー→線の色の変更
Shift+左右矢印キー→画像の左右反転
Shift+スペースキー→フルスクリーン（全体画面）
Shift+Sキー→画像保存

・[github]修正内容はこちら
線の太さ変更用に一部HTMLを変更しています。

この後は画像をサーバーにアップロード出来るようにするか、WebSocketを使ってお絵かきチャットできるようにするか、画像をドラッグアンドドロップだけで下絵にできるトレース機能を作るか機能改善するかは未定です。
ブランチ切ってそれぞれのバージョン作っても良いかもですね。

最初：お絵かきできるSNSを作りたい！