2

タイトルが曖昧で申し訳ありませんが、私が尋ねようとしていることを要約する方法が完全にはわかりません。

まず、これが私がこれまでに持っているもののjsFiddleです。

HTML5キャンバス要素の使い方とjsOOPの使い方を学び始めたところです。

フィドルからわかるように、長方形のクラスを作成し（冗長かもしれませんが、できるだけ多くの正方形を作成できるように）、それを参照して描画します。ただし、を設定するheight = widthと、常に非正方形になります。私はキャンバスを使用するのは比較的新しいですが、正方形の高さと幅はキャンバス要素のサイズに比例しているため、キャンバス要素の高さと幅は比例してはならないためだと思います（割り当てられたパーセント値ではなく明確なピクセルに）。

正方形のサイズをピクセルに設定することでこれを修正できますが、キープレスイベントが呼び出されたときに、正方形がまったく移動しません。

また、ユーザーが矢印キーで正方形を移動できるように、keypressイベントがあります。ただし、コードでフリップフロップを使用しても、上下のキーの値が反転しているように見えますか？そして、左/右のキーは何もしませんか？

そして、私も正方形を上下に動かすことができるのは一度だけですか？ユーザーが対応するボタンを押し続ける限り、私のコードでx / y値を増やすことはできませんか？

誰かがこれをチェックして、私が間違っていることについていくつかの指針を私に与えることができれば、それは素晴らしいことです！私はこれを使ってたくさんの新しいことを試みています。それは単なる学習体験なので、もしあなたがそんなに傾いていると感じたら、私が学ぶのを手伝ってください！

4

2 に答える 2

5

キャンバスのサイズを変更すると、CSSを使用しようとするとうまくいかないことがよくあります。キャンバスの描画にCSSを使用すると、解像度が変更されずに拡大縮小されます。解像度を設定するには、HTMLのwidth=and属性を使用します。height=

動きに関しては、keyupうまくいくようです。ただし、upキーの場合、yはデクリメントされます（上は0、下は何かポジティブです）。

私が強調したい他のいくつかのこと。

canvasコンテキストの変数名として使用するのは少しあいまいです。キャンバスと描画に使用されるコンテキストには違いがあります。

また、存在しない//browser doesn't support html5かどうかを述べます。ctxただし、ブラウザがcanvas / HTML5をサポートしていない場合.getContext('2d')、その場合は関数ではないため、関数呼び出しはすでに失敗します。ステートメントelseは、関数が存在するが何かを返さない場合にのみ実行されます。おそらくそうなることはないでしょう。

空elseのループもあまり役に立ちませんが、それは害にはなりません:)

http://jsfiddle.net/DqrEm/4/

于 2011-07-28T15:47:36.083 に答える
2

あなたの問題はあなたの正方形のサイズではなく、あなたのサイズの仕方にありますcanvas。あなたのjsfiddleで、canvasスタートラインを<canvas id="practice" width="500" height="500">正方形に変更すると、正しく描画されました。CSSのとを100％から500pxに変更しようwidthとしましたが、正方形が正しく描画されませんでした。height

更新：実際のタグ（つまり）でとwidthをheight100％に設定することもできます。canvas<canvas id="practice" width="100%" height="100%">

于 2011-07-28T15:46:42.870 に答える