?
This document uses PHP Chinese website manual Release
<canvas>元素可被用來通過腳本（通常是JavaScript）繪制圖形。
內容類別 | 流量內容，措辭內容，嵌入內容，可觸及的內容。 |
|---|---|
允許的內容 | 除<元素，<按鈕>元素，<type>屬性為復選框，收音機或按鈕的<input>元素外，透明但沒有交互式內容的后代。 |
標記遺漏 | 沒有，起始和結束標簽都是強制性的。 |
允許父母 | 任何接受phrasing_content的元素。 |
允許ARIA角色 | 任何 |
DOM界面 | HTMLCanvasElement |
屬性
本元素支持 全局屬性.
height該元素占用空間的高度，以 CSS 像素（px）表示，默認為 150。
moz-opaque通過設置這個屬性，來控制canvas元素是否半透明。如果你不想canvas元素被設置為半透明，使用這個元素將可以優(yōu)化瀏覽器繪圖性能。
width該元素占用空間的寬度，以 CSS 像素（px）表示，默認為 300。
注意事項
可替代的內容
你可以（也應該）在<canvas>塊內提供備用內容。該內容將在不支持畫布的舊瀏覽器和禁用JavaScript的瀏覽器中呈現(xiàn)。
需要</canvas> 標簽
不同于 <img> 元素, <canvas>元素需要有閉合標簽 (</canvas>).
設置畫布(canvas)的大小
可以通過CSS來控制<canvas>的大小。在渲染的過程中<canvas>元素中的內容會根據(jù)情況縮放來適應需要的大小。如果您發(fā)現(xiàn)<canvas>元素中展示的內容變形，您可以通過<canvas>自帶的height和width屬性進行相關設置，而不要使用CSS。
示例
這個代碼片段為您的HTML文檔添加一個畫布元素。如果瀏覽器無法渲染畫布，或者無法讀取畫布，則會提供后備文本。提供有用的后備文本或子DOM，更易于訪問畫布。
<canvas id="canvas" width="300" height="300"> An alternative text describing what your canvas displays. </canvas>
如果你沒有設置<canvas>元素的透明度，可以考慮使用moz-opaque屬性。下面給出的示例代碼可用于頁面渲染優(yōu)化。但需要您注意的是，這個屬性目前還沒有被推廣開來，只能在基于Mozilla內核的瀏覽器內生效。
<canvas id="myCanvas" moz-opaque></canvas>
規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
HTML生活標準該規(guī)范中'<canvas>'的定義。 | 生活水平 | |
HTML5該規(guī)范中'<canvas>'的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic Support | 1 | (Yes) | 1.51 2 3 | 9 | 9 | 24 |
height | 1 | (Yes) | 1.51 2 3 | 9 | 9 | 24 |
moz-opaque | No | No | 3.5 | No | No | No |
width | 1 | (Yes) | 1.51 2 3 | 9 | 9 | 24 |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
Basic Support | ? | ? | (Yes) | 1.51 2 3 | ? | No | 1 |
height | ? | ? | (Yes) | 1.51 2 3 | ? | No | 1 |
moz-opaque | No | No | No | 1 | No | No | No |
width | ? | ? | (Yes) | 1.51 2 3 | ? | No | 1 |