<canvas>

這個 HTML <canvas> 元素 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在<canvas>區段內提供替代方案的內容 .這內容將能被一些不支援<canvas>以及無法使用Javescript功能的瀏覽器所渲染 .

更多文章關於canvas, 請參考 canvas 主題

Content 分類 流程式content, 段落式content, 強調式content, 可見式 content.

被允許通過的內容

除了子元素不是 <a>的元素、 <button>的元素、<input>的元素屬性是checkbox, radio, 或 button 之外且是透明內容模型但不是互動式content

Tag 省略 不能省略標籤<canvas> </canvas>
被允許通過的父親元素

任何強調式content的元素皆可通過

DOM 介面 HTMLCanvasElement

屬性

這個元素的屬性包含全域屬性

height
在CSS 中以 pixels 表示 座標的空間高度(預設是150)
moz-opaque Non-Standard
讓canvas知道這個因素是否為半透明的。如果 canvas 知道不是半透明,則提高繪畫的效能
width
在CSS 中以 pixels 表示 座標的空間寬度(預設是300)

描述

需要 </canvas> 結尾

與<img>不同之處,<canvas>需要</canvas> 結尾

canvas的大小設置

canvas的大小設置可透過樣式表(stylesheet)被改變。可經由樣式修改圖像的縮放大小。

若呈現的效果圖似乎是扭曲變形的,可試著先修改<canvas>標籤中的widthheight的屬性,而不建議使用css去控制。

範例

將下面這條範例加到你的HTML文件。如果你的瀏覽器並不支援canvas 或不能讀取canvas 時,則會回報canvas中的訊息。若想知道更多有用的回應訊息或替代DOM的註文,可以參考更多相似的註文

<canvas id="canvas" width="300" height="300">
  抱歉,你的瀏覽器並不支援<canvas>元素
</canvas>

如果你的canvas沒有使用透明度,可在<canvas>標籤設立moz-opaque屬性,提升它的繪圖效果。moz-opaque 尚未標準化,所以只適用在 Mozilla 的 效能引擎。

<canvas id="mycanvas" moz-opaque></canvas>

規範

Specification
HTML Standard
# the-canvas-element

瀏覽器相容性

BCD tables only load in the browser

延伸閱讀