- 締切済み
javascriptKeydownのcanvas
こんにちは。 javascriptのkeydownについての質問です。 <script type="text/javascript"> document.onkeydown = draw; function draw() { var hiddenI = document.getElementById("i"); var hiddenJ = document.getElementById("j"); i = hiddenI.value; j = hiddenJ.value; var canvas = document.getElementById('rolate'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); //下ボタン if(event.keyCode == 40){ i = i; j += 1; ctx.lineTo(i, j); ctx.closePath(); ctx.stroke(); } //右ボタン else if(event.keyCode == 39){ i += 1 ; j = j; ctx.lineTo(i, j); ctx.closePath(); ctx.stroke(); } hiddenI.value = i; hiddenJ.value = j; } </script> <body> <h1>Canvas</h1> <canvas id="rolate" width="600" height="600" style="background:#ffffff;"></canvas> <input type="hidden" value="5" id="i"> <input type="hidden" value="5" id="j"> </body> </html> このコードで下ボタンと右ボタンが押されたとき、 決まった5ピクセルずつdrawしようと書きましたが、 キーを押すたびに、値が倍増されます。 どうすれば、5ピクセルずつ値を増やせるのでしょうか。 間違いがある箇所があれば、ご教授お願いします。 よろしくお願いします。
- augustcrymaybe
- お礼率50% (1/2)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんにちは。 なんだかいろいろ… とりあえず、 ＞i = hiddenI.value; でiの内容は文字列になっていますので、その後 ＞i += 1 とすると値は、"5"+1 → "51"などになります。 ＞どうすれば、5ピクセルずつ値を増やせるのでしょうか 増加する値を5にしたいとしても、ご提示のコードでは ＞i += 1 のように増し分が1で固定されているから ＞キーを押すたびに、値が倍増されます ↑の最初の理由で、値は約10倍になっているはずです …といったあたりを修正すればよろしいかと。 他にも修正したほうがよさそうなのは… 1）canvasでラインを引くには、最初にポイントへ移動（moveTo）の後、lineToではないでしょうか。また、線を引くだけなのでclosePathは不要かと。 2）event変数をシステムで持っているのはＩＥの仕様なので、他のブラウザでは動作しない可能性があります。 3）input:hiddenの要素が増し分を制御するためのものなのか、座標の記録場所なのか不明ですが、いずれにしろスクリプトの変数で保持していれば不要のはず。 4）canvasの取得などをイベント処理の中で毎回行っていますが、無駄なので最初に一回だけで。
