HTML Canvas - width 屬性

HTMLCanvasElement 介面的 HTML Canvas width 屬性接受一個正整數，然後設定 Canvas 元素佈局的寬度大小。

它作為 HTML5 程式碼中 Canvas 標籤的屬性傳遞。如果未提供該屬性，則使用預設值 300。它基本上控制 Canvas 元素的寬度。

可能的輸入值

它接受所有正整數，並將該值應用於 Canvas 元素的寬度（以畫素為單位）。

示例

以下示例使用預設的 HTML Canvas width 屬性值並構建 Canvas 元素佈局。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" style="border: 1px solid black;"></canvas>
   </body>
</html>

輸出

由於我們在以上程式碼中沒有給出 width 的值，因此考慮 Canvas 寬度預設值 (300) 並繪製 Canvas 元素佈局。以上程式碼在網頁上給出的輸出為：

示例

以下示例演示瞭如何使用 Canvas 元素的 width 屬性來更改 Canvas 的尺寸。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas1" width="100" style="border: 1px solid rgb(100, 82, 117);"></canvas>
      <canvas id="canvas2" width="200" style="border: 1px solid rgb(43, 236, 43);"></canvas>
   </body>
</html>

輸出

程式建立了兩個具有不同寬度的畫布，並展示了該屬性如何更改 Canvas 元素的佈局。以上程式碼在新網頁上返回輸出為：

示例

以下示例在控制檯以及視窗警報中顯示 Canvas 元素的寬度。

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

輸出

程式建立一個具有輸入寬度的畫布，並在控制檯和視窗警報中顯示它。以上程式碼透過視窗警報返回輸出為：

在控制檯中顯示的輸出為：

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

html_canvas_element.htm

列印頁面