如何使 HTML5 Canvas 元素適合整個視窗？

調整畫布大小以適合視窗

問題：

雖然您可以輕鬆地縮放

透過將元素的高度和寬度設定為100% 來適應可用空間，縮放HTML5

解決方案：

要優雅地解決此問題並確保畫布元素符合視窗的尺寸，請考慮以下方法：

JavaScript：

/* Essential for aligning elements relative to the canvas' current proportions. */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS：

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

CSS：

實作細節：JavaScript 函數動態設定畫布元素的寬度和高度屬性以符合視窗的尺寸。 CSS 規則刪除 周圍的任何邊距或填滿。和元素，讓畫布完全展開。 該解決方案已被證明具有高性能且視覺效果令人滿意，使您的畫布元素能夠無縫適應周圍環境。

以上是如何使 HTML5 Canvas 元素適合整個視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！