1

それ以外の

<pre>
    <canvas id="theCanvas" width="500" height="500"></canvas>
</pre>

キャンバスのサイズを指定する場所で、キャンバスがブラウザ ウィンドウ全体を占めるようにする方法はありますか?

4

3 に答える 3

4

画面全体にまたがるキャンバス要素を作成している場合、おそらくウィンドウのサイズ変更イベントを監視したいと思うでしょう。パーセンテージ ベースのスタイルを使用することもできますが、ウィンドウのサイズが変更されるたびにキャンバスを再描画することを忘れないでください。キャンバス要素の寸法 (幅または高さ) が変更されると、キャンバス自体がクリアされ、効果的にリセットされます (オリジン ポリシーは例外です)。

次のようなものを使用することをお勧めします。

window.addEventListener(
  'resize', 
  function() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    MyRepaintCallback(); 
  }, 
  false);

この質問の範囲を超えて、再描画機能についていくつかの考慮事項があります。少なくとも、ダブル バッファリングにより、再描画呼び出しの間にキャンバスがちらつくことがなくなる可能性が高いことを知って、安心してください。

于 2009-10-03T20:30:49.283 に答える
3 
<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>
于 2009-02-05T21:19:26.717 に答える
0

CSS では、html、body (および asp.net の場合はフォーム) タグの幅と高さを 100% に設定します。

ただし、古い IE では機能しません。

于 2009-02-05T21:19:26.860 に答える