<canvas>
這個 HTML <canvas>
元素 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在<canvas>區段內提供替代方案的內容 .這內容將能被一些不支援<canvas>以及無法使用 Javescript 功能的瀏覽器所渲染 .
更多文章關於 canvas, 請參考 canvas 主題
Content 分類 (en-US) | 流程式 content (en-US), 段落式 content (en-US), 強調式 content (en-US), 可見式 content. |
---|---|
被允許通過的內容 | 除了子元素不是 <a>的元素、 <button>的元素、<input>的元素屬性是checkbox , radio , 或 button 之外且是透明內容模型但不是互動式 content (en-US) |
Tag 省略 | 不能省略標籤<canvas> |
被允許通過的父親元素 | 任何強調式 content (en-US)的元素皆可通過 |
DOM 介面 | HTMLCanvasElement |
屬性
這個元素的屬性包含全域屬性
height
-
在 CSS 中以 pixels 表示 座標的空間高度(預設是 150)
moz-opaque
非標準-
讓 canvas 知道這個因素是否為半透明的。如果 canvas 知道不是半透明,則提高繪畫的效能
width
-
在 CSS 中以 pixels 表示 座標的空間寬度(預設是 300)
描述
需要 </canvas>
結尾
與<img>不同之處,<canvas>
需要</canvas>
結尾
canvas 的大小設置
canvas 的大小設置可透過樣式表(stylesheet)被改變。可經由樣式修改圖像的縮放大小。
若呈現的效果圖似乎是扭曲變形的,可試著先修改<canvas>
標籤中的width
和height
的屬性,而不建議使用 css 去控制。
範例
將下面這條範例加到你的 HTML 文件。如果你的瀏覽器並不支援 canvas 或不能讀取 canvas 時,則會回報 canvas 中的訊息。若想知道更多有用的回應訊息或替代 DOM 的註文,可以參考更多相似的註文。
html
<canvas id="canvas" width="300" height="300">
抱歉,你的瀏覽器並不支援 canvas 元素</canvas
>
如果你的 canvas 沒有使用透明度,可在<canvas>標籤設立moz-opaque
屬性,提升它的繪圖效果。moz-opaque
尚未標準化,所以只適用在 Mozilla 的 效能引擎。
html
<canvas id="mycanvas" moz-opaque></canvas>
規範
Specification |
---|
HTML Standard # the-canvas-element |
瀏覽器相容性
BCD tables only load in the browser