HTML 5 <canvas> 标簽

定義和用法

<canvas> 标簽定義圖形，比如圖表和其他圖像。

<canvas> 标簽隻是圖形容器，您必須使用腳本來繪制圖形。

執行個體

如何通過 canvas 元素來顯示一個紅色的矩形：

<canvas id="myCanvas"></canvas>                

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>
      

親自試一試

HTML 4.01 與 HTML 5 之間的差異

<canvas> 标簽是 HTML 5 中的新标簽。

屬性

	值	描述
height	pixels	設定 canvas 的高度。
width		設定 canvas 的寬度。

标準屬性

<canvas> 标簽支援 HTML 5 中的标準屬性。

事件屬性

<canvas> 标簽支援 HTML 5 中的事件屬性。

<canvas> 的曆史

這個 HTML 元素是為了用戶端矢量圖形而設計的。它自己沒有行為，但卻把一個繪圖 API 展現給用戶端 JavaScript 以使腳本能夠把想繪制的東西都繪制到一塊畫布上。

<canvas> 标記由 Apple 在 Safari 1.3 Web 浏覽器中引入。對 HTML 的這一根本擴充的原因在于，HTML 在 Safari 中的繪圖能力也為 Mac OS X 桌面的 Dashboard 元件所使用，并且 Apple 希望有一種方式在 Dashboard 中支援腳本化的圖形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引領。這兩個浏覽器都支援 <canvas> 标記。

我們甚至可以在 IE 中使用 <canvas> 标記，并在 IE 的 VML 支援的基礎上用開源的 JavaScript 代碼（由 Google 發起）來建構相容性的畫布。 參見：http://excanvas.sourceforge.net/。

<canvas> 的标準化的努力由一個 Web 浏覽器廠商的非正式協會在推進，目前 <canvas> 已經成為 HTML 5 草案中一個正式的标簽。 參見：http://www.whatwg.org/specs/web-apps/current-work/

<canvas> 标記和 SVG 以及 VML 之間的差異

<canvas> 标記和 SVG 以及 VML 之間的一個重要的不同是，<canvas> 有一個基于 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。

這兩種方式在功能上是等同的，任何一種都可以用另一種來模拟。從表面上看，它們很不相同，可是，每一種都有強項和弱點。例如，SVG 繪圖很容易編輯，隻要從其描述中移除元素就行。

要從同一圖形的一個 <canvas> 标記中移除元素，往往需要擦掉繪圖重新繪制它。

如何使用 <canvas> 标記繪圖

大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環境”對象上。

Canvas API 也使用了路徑的表示法。但是，路徑由一系列的方法調用來定義，而不是描述為字母和數字的字元串，比如調用 beginPath() 和 arc() 方法。

一旦定義了路徑，其他的方法，如 fill()，都是對此路徑操作。繪圖環境的各種屬性，比如 fillStyle，說明了這些操作如何使用。

注釋：Canvas API 非常緊湊的一個原因上它沒有對繪制文本提供任何支援。要把文本加入到一個 <canvas> 圖形，必須要麼自己繪制它再用位圖圖像合并它，或者在 <canvas> 上方使用 CSS 定位來覆寫 HTML 文本。

Canvas 對象

Canvas 對象表示一個 HTML 畫布元素 - <canvas>。它沒有自己的行為，但是定義了一個 API 支援腳本化用戶端繪圖操作。

你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過 CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的 getContext() 方法并且把直接量字元串 "2d" 作為唯一的參數傳遞給它而獲得的。

<canvas> 标記在 Safari 1.3 中引入，在制作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支援。在 IE 中，<canvas> 标記及其 API 可以使用位于 excanvas.sourceforge.net 的 ExplorerCanvas 開源項目來模拟。

提示：如果希望學習如何使用 <canvas> 來繪制圖形，可以通路 Mozilla 提供的 Canvas 教程（英文）以及相應的 中文 Canvas 教程。

Canvas 對象的屬性

height 屬性

畫布的高度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是視窗高度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。預設值是 300。

width 屬性

畫布的寬度。和一幅圖像一樣，這個屬性可以指定為一個整數像素值或者是視窗寬度的百分比。當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉。預設值是 300。

Canvas 對象的方法

方法
getContext()	傳回一個用于在畫布上繪圖的環境。