Design Code 設計密碼

實例

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

<code><canvas id="myCanvas"></canvas></code>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
	

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及Safari 支持<canvas> 標籤。

註釋： Internet Explorer 8以及更早的版本不支持<canvas>標籤。

定義和用法

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

<canvas> 標籤只是圖形容器，您必須使用腳本來繪製圖形。

HTML 4.01 與HTML 5 之間的差異

<canvas> 標籤是HTML 5 中的新標籤。

屬性

全局屬性

<canvas>標籤支持HTML中的全局屬性。

事件屬性

<canvas>標籤支持HTML中的事件屬性。

<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文本。