HTML 5 <canvas> 標(biāo)簽
定義和用法
<canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像。
HTML 4.01 與 HTML 5 之間的差異
<canvas> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。
<canvas> 的歷史
這個 HTML 元素是為了客戶端矢量圖形而設(shè)計的。它自己沒有行為，但卻把一個繪圖 API 展現(xiàn)給客戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。
<canvas> 標(biāo)記由 Apple 在 Safari 1.3 Web 瀏覽器中引入。對 HTML 的這一根本擴展的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 組件所使用，并且 Apple 希望有一種方式在 Dashboard 中支持腳本化的圖形。
Firefox 1.5 和 Opera 9 都跟隨了 Safari 的引領(lǐng)。這兩個瀏覽器都支持 <canvas> 標(biāo)記。
我們甚至可以在 IE 中使用 <canvas> 標(biāo)記，并在 IE 的 VML 支持的基礎(chǔ)上用開源的 JavaScript 代碼（由 Google 發(fā)起）來構(gòu)建兼容性的畫布。參見：http://excanvas.sourceforge.net/。
<canvas> 的標(biāo)準(zhǔn)化的努力由一個 Web 瀏覽器廠商的非正式協(xié)會在推進，目前 <canvas> 已經(jīng)成為 HTML 5 草案中一個正式的標(biāo)簽。參見：http://www.whatwg.org/specs/web-apps/current-work/
<canvas> 標(biāo)記和 SVG 以及 VML 之間的差異
<canvas> 標(biāo)記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。
這兩種方式在功能上是等同的，任何一種都可以用另一種來模擬。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，只要從其描述中移除元素就行。
要從同一圖形的一個 <canvas> 標(biāo)記中移除元素，往往需要擦掉繪圖重新繪制它。
如何使用 <canvas> 標(biāo)記繪圖
大多數(shù) Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環(huán)境”對象上。
Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調(diào)用來定義，而不是描述為字母和數(shù)字的字符串，比如調(diào)用 beginPath() 和 arc() 方法。
一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環(huán)境的各種屬性，比如 fillStyle，說明了這些操作如何使用。
注釋：Canvas API 非常緊湊的一個原因上它沒有對繪制文本提供任何支持。要把文本加入到一個 <canvas> 圖形，必須要么自己繪制它再用位圖圖像合并它，或者在 <canvas> 上方使用 CSS 定位來覆蓋 HTML 文本。
例子：
<script type="text/javascript">
function drawCanvas()
{
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
}
</script>
...
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| height | pixels | 設(shè)置 canvas 的高度。 |
| width | pixels | 設(shè)置 canvas 的寬度。 |
標(biāo)準(zhǔn)屬性
class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
如需完整的描述，請訪 HTML 5 中標(biāo)準(zhǔn)屬性。
事件屬性
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
如需完整的描述，請訪 HTML 5 中事件屬性。
參閱
HTML DOM Canvas 對象