コンテナに合わせて HTML5 キャンバスを自動的に拡大縮小するにはどうすればよいですか?

HTML5 キャンバスの強化: 完璧にフィットする自動スケーリング

HTML5 を使用する場合要素を使用すると、制限が発生する可能性があります。それは、含まれる要素に合わせて自動的に拡大縮小されないということです。これは、さまざまな画面サイズに適応する必要があるレスポンシブ Web アプリケーションを作成する場合に課題になる可能性があります。

幸いなことに、簡単にスケーリングできる賢いソリューションがあります。

スケーリング修正

の幅と高さの属性を静的に設定する代わりに、JavaScript を使用してウィンドウの現在の寸法に基づいてそれらを動的に調整します:

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

このスクリプトにより、キャンバスが常にビューポートの属性と一致するようになります。サイズ。

正しい位置を維持するには、キャンバスの更新された寸法を基準にして描画操作を調整することが重要です。

スタイリング マジック

キャンバスを確実に表示するには、JavaScript を CSS で補完してください。ウィンドウ全体に広がります:

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

この CSS により、キャンバスが画面全体を占めるようになり、あらゆる HTML コンテナに最適になります。

パフォーマンスに関する考慮事項

このスケーリング メカニズムの実装によるパフォーマンスへの影響は最小限であることが証明されています。ただし、大きくズームインしたキャンバスに複雑なグラフィックを描画すると、レンダリング プロセスが遅くなる可能性があることに注意することが重要です。

以上がコンテナに合わせて HTML5 キャンバスを自動的に拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。