HTML5キャンバスの描画と更新

Question

タイトルが曖昧なことは申し訳ありませんが、私は何を求めているのかを完全にはっきりと確認できません。

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

私は、HTML5のキャンバス要素を使用することを学ぶだけでなく、js OOPを使用することも学び始めています。

フィドルからわかるように、私は矩形クラスを作成します（できるだけ多くの四角形を作成できるように、私は冗長かもしれませんが）。しかし、私がheight = widthを設定すると、私はいつも非正方形で終わる。私はキャンバスを使用するのは比較的新しいですが、正方形の高さと幅はキャンバス要素のサイズに関連しているため、キャンバス要素の高さと幅は比例してはいけません（反対の値ピクセルを確定する）。

正方形のサイズをピクセルに設定することで問題を解決できますが、キーの押下イベントが呼び出されると、四角形はまったく動かなくなります。

また、私は、ユーザが矢印キーで四角形を移動できるように、キー押しイベントを持っています。しかし、アップ/ダウンキーの値は、コード内でフリップフロップしても反転されているようです。そして、左/右のキーは何もしませんか？

また、四角形を1回上/下に移動することもできますか？ユーザーが対応するボタンを押し続けている限り、私のコードでx/y値を大きくすることはできませんか？

誰かがこれをチェックして、私が間違っていることについていくつかの指摘をすることができたら、それは素晴らしいことでしょう！私はこれだけの学習体験として、これで多くの新しいことを試しています。だからあなたがそんな気がするなら、私が学ぶのを助けてください！

Answer 1

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

動きについては、keyupがうまく機能しているようです。ただし、upキーの場合、yはデクリメントされます（先頭は0、下は何かが正です）。

私が強調したいことがいくつかあります。

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

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

空elseループは、いずれかの非常に有用ではないが、それは悪くはない:)

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

Answer 2

あなたの問題は、正方形のサイズではなく、あなたのサイズをどのようにしてcanvasかで決まります。あなたのjsfiddleでは、canvasの開始行を<canvas id="practice" width="500" height="500">に変更すると正方形が正しく描かれました。 CSSのwidthとheightを100％から500pxに変更しようとしましたが、正方形がまだ正しく描画されていませんでした。

更新：は実際のcanvasタグ（すなわち<canvas id="practice" width="100%" height="100%">）で100％にwidthとheightを設定するには、あまりにも動作します。