HTML 畫布 - 高度屬性

HTMLCanvasElement 介面的 HTML 畫布 height 屬性接受一個正整數，然後設定畫布元素佈局的高度。

它作為屬性傳遞給 HTML5 程式碼中的 Canvas 標籤。如果未指定此屬性，則使用預設值 150。它主要控制使用時的畫布元素高度。

可能的輸入值

它接受所有正整數，並將給定值設定為畫布元素的高度（以畫素為單位）。

示例

以下示例演示如何使用畫布元素的 HTML 畫布 height 屬性來更改畫布的尺寸。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas1" height="200" style="border: 1px solid blueviolet;"></canvas>
      <canvas id="canvas2" height="500" style="border: 1px solid green;"></canvas>
   </body>
</html>

輸出

程式建立了兩個高度不同的畫布，並顯示了該屬性如何更改畫布元素的佈局。上述程式碼在新的網頁上返回輸出，如下所示：

示例

以下示例顯示畫布元素的高度，在控制檯和視窗警告中。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" height="350" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         console.log('Canvas height : ' + canvas.height);
         window.alert('canvas height is ' + canvas.height);
      </script>
</html>

輸出

程式建立一個具有輸入高度的畫布，並在控制檯和視窗警告中顯示它。上述程式碼透過視窗警告返回輸出，如下所示：

在控制檯中顯示的輸出：

上述程式碼在網頁上生成的畫布：

html_canvas_element.htm

列印頁面