私は既に検索エンジンを使用していましたが、私が望む情報が得られなかったので、自分で作成した座標系を使うために良い方法/ HTML5キャンバス要素。スケーリングされたキャンバス要素の座標
私はそうのように、ブラウザウィンドウ全体に適応すべきであるcanvas要素を使用して、HTML5で2Dゲームを開発したい：
<canvas style="width: 100%; height: 100%;">
No support for your browser, unfortunately...
</canvas>
問題は、私は私が管理すべきかわからないということです私のゲームの座標。 私のゲームでは、プレーヤー。ユーザーが右矢印キーを押すとすぐに右に32ピクセル移動しますが、キャンバス要素のサイズを変更するとどうなりますか？ 論理的には、ゲームの「ブロック」もサイズが変更されるため、座標の単位はもうピクセルになりません。
私が使用できるユニットが他にありますか？
セットキャンバスの幅と高さは、領域サイズ
<canvas id="mycanvas" width="400" height="300"/>
をゲームや、画面上の所望の表示サイズにそのスタイルを設定する属性。
キャンバスが400x300であり、描画時に画面上の実際の物理ピクセルサイズを無視すると、いつでも想定できます。
ゲーム座標上の実際の位置に対応するには、マウスのクリックをスケーリングする必要があります。だから（x、y）でキャンバスをマウスでクリックすると、x =（x/$（ '＃mycanvas'）。width（））* 400と同様にゲーム座標上の位置が得られます。キャンバスがフルスクリーンでない場合は、$（ '＃mycanvas'）.offset（）を使用してクリック座標のデルタを取得します。
キャンバスにCSSサイジングを使用したことは決して非常に醜いものになります。
あなたが書いたものは、キャンバスの幅をページの幅にしないため、幅300ピクセル×高さ150ピクセル（デフォルト）になり、ページの幅と高さまでワープします。
CSSを使用する代わりにCanvasが持つ幅と高さの属性に固執する。
ページのサイズにする場合は、div内にキャンバスを置き、canvas.widthをdiv.style.clientWidthと同じようにするなど、他のオプションがあります。異なる（フルスクリーンまたはしない）ウィンドウサイズでの作業のために
、私の答えは話して見るここで「モデル座標」：;）あなたの有能な助けを おかげでとても論理的ザッツWorking with canvas in different screen sizes
ほとんどすべてのHTML要素で真ですが、
..私は今愚かな感じています!!! – SmartArray