We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

這個 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
讓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>

規範

規格 狀態 註解
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  
HTML5
The definition of '<canvas>' in that specification.
Recommendation 原始的定義

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
9.0 9.0[4] 2.0[5]
moz-opaque No support 3.5 (1.9.1) No support No support No support
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 (1.8)[1]
6.0 (6.0)[2]
12.0 (12.0)[3]
? ? ? 1.0
moz-opaque 1.0 (1.9.1) No support No support No support No support

[1] Before Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the canvas width and height were signed integers instead of unsigned integers.

[2] Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), a <canvas> element with a zero width or height would be rendered as if it had default dimensions.

[3] Before Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Now the fallback content is rendered instead.

[4] See the changelog for Opera 9.0.

[5] Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Those versions of Safari (prior to version 2.0) will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it. Fortunately, users of these versions of Safari are rare nowadays.

延伸閱讀

文件標籤與貢獻者

此頁面的貢獻者: pig3629, GG9
最近更新: pig3629,