?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
<canvas>元素可被用來通過腳本（通常是JavaScript）繪制圖形。
內(nèi)容類別 | 流量?jī)?nèi)容，措辭內(nèi)容，嵌入內(nèi)容，可觸及的內(nèi)容。 |
|---|---|
允許的內(nèi)容 | 除<元素，<按鈕>元素，<type>屬性為復(fù)選框，收音機(jī)或按鈕的<input>元素外，透明但沒有交互式內(nèi)容的后代。 |
標(biāo)記遺漏 | 沒有，起始和結(jié)束標(biāo)簽都是強(qiáng)制性的。 |
允許父母 | 任何接受phrasing_content的元素。 |
允許ARIA角色 | 任何 |
DOM界面 | HTMLCanvasElement |
屬性
本元素支持 全局屬性.
height該元素占用空間的高度，以 CSS 像素（px）表示，默認(rèn)為 150。
moz-opaque通過設(shè)置這個(gè)屬性，來控制canvas元素是否半透明。如果你不想canvas元素被設(shè)置為半透明，使用這個(gè)元素將可以優(yōu)化瀏覽器繪圖性能。
width該元素占用空間的寬度，以 CSS 像素（px）表示，默認(rèn)為 300。
注意事項(xiàng)
可替代的內(nèi)容
你可以（也應(yīng)該）在<canvas>塊內(nèi)提供備用內(nèi)容。該內(nèi)容將在不支持畫布的舊瀏覽器和禁用JavaScript的瀏覽器中呈現(xiàn)。
需要</canvas> 標(biāo)簽
不同于 <img> 元素, <canvas>元素需要有閉合標(biāo)簽 (</canvas>).
設(shè)置畫布(canvas)的大小
可以通過CSS來控制<canvas>的大小。在渲染的過程中<canvas>元素中的內(nèi)容會(huì)根據(jù)情況縮放來適應(yīng)需要的大小。如果您發(fā)現(xiàn)<canvas>元素中展示的內(nèi)容變形，您可以通過<canvas>自帶的height和width屬性進(jìn)行相關(guān)設(shè)置，而不要使用CSS。
示例
這個(gè)代碼片段為您的HTML文檔添加一個(gè)畫布元素。如果瀏覽器無法渲染畫布，或者無法讀取畫布，則會(huì)提供后備文本。提供有用的后備文本或子DOM，更易于訪問畫布。
<canvas id="canvas" width="300" height="300"> An alternative text describing what your canvas displays. </canvas>
如果你沒有設(shè)置<canvas>元素的透明度，可以考慮使用moz-opaque屬性。下面給出的示例代碼可用于頁(yè)面渲染優(yōu)化。但需要您注意的是，這個(gè)屬性目前還沒有被推廣開來，只能在基于Mozilla內(nèi)核的瀏覽器內(nèi)生效。
<canvas id="myCanvas" moz-opaque></canvas>
規(guī)范
規(guī)范 | 狀態(tài) | 評(píng)論 |
|---|---|---|
HTML生活標(biāo)準(zhǔn)該規(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 |