１つ前に戻す(日本語あってる？)を実装したのでついついやりたくなる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キー→画像保存
この後は画像をサーバーにアップロード出来るようにするか、WebSocketを使ってお絵かきチャットできるようにするか、画像をドラッグアンドドロップだけで下絵にできるトレース機能を作るか機能改善するかは未定です。