如何使 HTML5 Canvas 自動縮放以適合其容器？

增強HTML5 Canvas：自動縮放以實現完美貼合

使用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>

此腳本確保畫布始終與視口的匹配

為了保持正確的定位，將繪圖操作與畫布更新的尺寸對齊至關重要。

造型魔法

用CSS 補充JavaScript 以確保畫布跨越整個視窗：

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

此CSS 可確保畫布佔據整個螢幕，使其完美適合任何HTML 容器。

效能注意事項

事實證明，實施此擴充機制對效能的影響最小。但是，需要注意的是，在大幅放大的畫布上繪製複雜圖形會減慢渲染過程。

以上是如何使 HTML5 Canvas 自動縮放以適合其容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！