JavaScript と CSS を使用して、ウィンドウのサイズに合わせて Canvas 要素のサイズを動的に変更する方法

JavaScript と CSS を使用してキャンバス サイズをウィンドウのサイズに動的に調整する

HTML5 キャンバス要素を操作する場合、自動的に拡大縮小するのが難しい場合があります利用可能な窓のスペースに合わせて寸法を調整します。 CSS を使用すると、div などの HTML 要素を 100% に拡大縮小できますが、canvas 要素には同じ効果がありません。

ただし、この問題にはシンプルで効率的な解決策があります。 JavaScript と CSS を活用することで、ウィンドウの寸法に合わせてキャンバス サイズを動的に調整できます。

JavaScript の実装:

JavaScript コードには、キャンバスの幅と現在のウィンドウ サイズに基づく高さのプロパティ。これにより、手動によるサイズ変更を必要とせずに、キャンバスがウィンドウ サイズの変更に確実に適応できるようになります。

<code class="javascript">function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}</code>

応答性のための CSS:

キャンバス要素が画面全体に表示されるようにするには、

<code class="css">html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}</code>

このソリューションは、パフォーマンスを大幅に低下させることなく応答性を維持するのに効果的であることが証明されています。サイズ変更をエレガントに処理し、キャンバス要素が常にウィンドウ内で最適な位置に配置されるようにするため、動的で適応性のある Web アプリケーションを簡単に作成できます。

以上がJavaScript と CSS を使用して、ウィンドウのサイズに合わせて Canvas 要素のサイズを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。