HTML5 Canvas 適應視窗大小

當您在不同的螢幕（例如手機、電腦、桌上型電腦或平板電腦）上檢視包含畫布的網頁時，螢幕的大小每次都會發生變化。因此，為了獲得更好的使用者體驗，畫布需要根據螢幕大小調整自身大小。

在本文中，我們將學習如何調整 HTML5 畫布的大小以適應視窗。

讓我們首先了解有關 HTML5 的更多資訊。

HTML5

HTML（超文字標記語言）是網頁的標準標記語言。使用 HTML，您可以建立自己的網站。

HTML5 是 HTML 的更新版本，其中使用了先進的技術。它的開發是為了解決與新瀏覽器相容性問題，並引入某些新功能，例如跨平臺相容性、使用標題、部分、文章標籤等標記語言提供更多頁面佈局選項。

HTML5 開發人員取得的一大成就之一是它支援多媒體，即移動裝置上的影片和音訊。引入了新的功能來支援此功能，例如影片、音訊和畫布標籤。此外，HTML5支援 Javascript 程式碼直接在瀏覽器上執行。

什麼是 HTML5 Canvas？

基本上，畫布是網頁中一個矩形封閉區域。預設情況下，它沒有邊框和內容。HTML5 的畫布元素使用 Javascript 允許使用者在網頁上繪製動態 2D 圖形並新增圖片。它由<canvas>標籤表示。此元素受 Chrome、Safari、Internet Explorer、Firefox 以及 Opera 支援。

預設情況下，畫布元素的高度為 150px，寬度為 300px。根據您的需要，您可以使用 CSS 自定義其大小和邊框。

語法

<canvas id= “” ></canvas>

示例

<html>
<body>
   <canvas id= “demo” height= “170” width = ”260” style = “ border: 2px solid #000000;” ></canvas>
</body>
</html>

在程式碼中，
高度和寬度分別指定畫布的高度和寬度。它可以具有各種值，例如自動（由瀏覽器分配）、長度（px、cm、mm 等）、初始（預設值）和繼承（從其父元素繼承的值）。

示例

height of 49px and width of 90%.
style = “ border : 2px solid #000000;”

CSS 的 border 屬性允許使用者使用寬度、高度、樣式、顏色等指定要顯示的邊框型別。

Border-style 有多種值，例如 solid、dotted、double、none、hidden、inset 等。

在上面的程式碼中，2px 是邊框寬度，solid 是邊框樣式，而 #000000 是黑色的十六進位制顏色程式碼。

十六進位制顏色程式碼是用於在全球資訊網上指定顏色的字母數字程式碼。每種顏色都有其唯一的十六進位制顏色程式碼。例如，白色為 #FFFFFF，藍色為 #0000FF，紅色為 #FF0000，黃色為 #FFFF00 等。

調整 HTML5 畫布大小以適應視窗

在本節中，我們將瞭解一些調整 HTML5 畫布大小以適應視窗的方法。

方法 1：使用 CSS

為了使畫布填充視窗，您可以使用 CSS 調整其大小。

示例

<html>
   <style>
      body {
         height : 100%;
         width : 100%;
      }
      canvas { 
         background-color: #ffff00;
         display: block;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         height: 100%;
         width: 100%;
      }
   </style>
<body>
   <canvas> </canvas>
</body>

將顯示一個填充整個螢幕的黃色畫布。

在上面的程式中，

畫布的寬度和高度設定為 100%。位置為絕對，頂部、左側、右側和底部為“0”，以使畫布適應視窗。

此外，主體元素透過將其高度和寬度值分配為 100% 來填充視窗。

方法 2：使用 Javascript

示例

<html>
   <style>
      body {
         width: 100%;
         height: 100%;
         overflow: hidden;
         display: block;
      }
   </style>
<body>
   <script>
      (function() {
         var myCanvas = document.getElementById(‘demo’) 
         // refering to the canvas using its id
         var content = myCanvas.getContext('2d');  
         function start() {
            screen.addEventListener('resize', fitCanvas, false);
            fitCanvas();    // initial canvas border
         }
         function resize() {
            content.strokeStyle = 'red';
            content.lineWidth = '10’;
            content.strokeRect(0, 0, screen.innerWidth, screen.innerHeight);
         }
         function fitCanvas() {
            myCanvas.width = screen.innerWidth;
            myCanvas.height = screen.innerHeight;
            resize();
         }
      })();
   </script>
   <canvas id='demo' style='position: absolute; right :0px; bottom : 0px;'></canvas>
</body>
</html>

顯示一個藍色邊框的畫布，該畫布適合視窗。

這裡，

  • 溢位 - hidden 用於裁剪元素的多餘內容，使其餘內容隱藏。

  • 顯示 - block 用於以塊元素（如<p>、<h2>等）的形式顯示任何元素。它在其上方和下方都有空白。

  • getContext - 用於在畫布元素上獲取圖形上下文。

  • screen.addEventListener('resize', fitCanvas, false); - 這段程式碼允許使用者建立一個事件偵聽器，該偵聽器在螢幕大小發生變化時都會呼叫 fitCanvas 函式

  • resize() - 用於向畫布新增樣式。這裡，它具有紅色、10 畫素的邊框，可隨視窗一起調整大小。

  • 每次視窗更改其大小時，畫布都會相應地更改其尺寸以適應它。

結論

可以調整 HTML5 畫布的大小，即更改其尺寸，以相應地適應整個螢幕。這可以透過使用 Javascript 或 CSS 來完成。

更新於： 2022 年 10 月 12 日

10K+ 次觀看

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.