如何使用 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 響應式：

確保畫布元素填滿可用空間並適當定位，我們使用 CSS 來配置 html 和 body 元素。

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

此解決方案已被證明可以有效保持響應能力，而不會顯著降低性能。它可以優雅地處理大小調整，並確保畫布元素始終處於視窗內的最佳位置，從而輕鬆創建動態和自適應 Web 應用程式。

以上是如何使用 JavaScript 和 CSS 動態調整 Canvas 元素的大小以適應視窗尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！