入瞭解canvas標籤（1）——基本用法
讓我們從<canvas>元素的定義開始吧。
Code:- <canvasid="tutorial"width="150"height="150"></canvas>
看起來很像<img>，唯一不同就是它不含 src 和 alt屬性。它只有兩個屬性，width 和 height，兩個都是可選的，並且都可以 DOM 或者 CSS 來設定。如果不指定width 和height，預設的是寬300畫素，高150畫素。雖然可以通過 CSS來調整canvas的大小，但渲染影象會縮放來適應佈局的（如果你發現渲染結果看上去變形了，不必一味依賴CSS，可以嘗試顯式指定canvas的width和 height 屬性值）。
id屬性不是<canvas>專享的，就像標準的HTLM標籤一樣，任何一個HTML元素都可以指定其id 值。一般，為元素指定 id 是個不錯的主意，這樣使得在指令碼中應用更加方便。
<canvas>元素可以像普通圖片一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式並不會對canvas實際生成的影象產生什麼影響。下面我們會看到如何應用樣式。如果不指定樣式，canvas預設是全透明的。
替用內容
因為 <canvas>相對較新，有些瀏覽器並沒實現，如Firefox1.0 和 Internet Explorer，所以我們需要為那些不支援canvas的瀏覽器提供替用顯示內容。
我們只需要直接在canvas元素內插入替用內容即可。不支援canvas的瀏覽器會忽略canvas元素而直接渲染替用內容，而支援的瀏覽器則會正常地渲染canvas。例如，我們可以把一些文字或圖片填入canvas內，作為替用內容：
Code:- <canvasid="stockGraph"width="150"height="150">
- current stock price: $3.15 +0.15 </canvas>
- <canvasid="clock"width="150"height="150">
-
<imgsrc="images/clock.png"width="150"height="150"/></canvas>
結束標籤 </canvas> 是必須的
在AppleSafari裡，<canvas>的實現跟<img>很相似，它並不沒有結束標籤。然而，為了使<canvas>能在web的世界裡廣泛適用，需要給替用內容提供一個容身之所，因此，在Mozilla的實現裡結束標籤(</canvas>)是必須的。
如果沒有替用內容，<canvas id="foo"...></canvas> 對 Safari和 Mozilla 是完全相容的—— Safari 會簡單地忽略結束標籤。
如果有替用內容，那麼可以用一些 CSS 技巧來為並且僅為 Safari 隱藏替用內容，因為那些替用內容是需要在 IE 裡顯示但不需要在Safari 裡顯示。
渲染上下文
<canvas>建立的固定尺寸的繪圖畫面開放了一個或多個渲染上下文（renderingcontext），我們可以通過它們來控制要顯示的內容。我們專注於2D 渲染上，這也是目前唯一的選擇，可能在將來會新增基於OpenGLES 的 3D 上下文。
<canvas>初始化是空白的，要在上面用指令碼畫圖首先需要其渲染上下文（rendering context），它可以通過 canvas 元素物件的getContext 方法來獲取，同時得到的還有一些畫圖用的函式。getContext()接受一個用於描述其型別的值作為引數。
Code:- var canvas = document.getElementById_x('tutorial');
- var ctx = canvas.getContext('2d');
上面第一行通過 getElementById 方法取得 canvas 物件的 DOM 節點。然後通過其getContext方法取得其畫圖操作上下文。
檢查瀏覽器的支援
除了在那些不支援 的瀏覽器上顯示替用內容，還可以通過指令碼的方式來檢查瀏覽器是否支援 canvas。方法很簡單，判斷 getContext是否存在即可。
Code:- var canvas = document.getElementById_x('tutorial'); if (canvas.getContext){
- var ctx = canvas.getContext('2d'); // drawing code here } else {
- // canvas-unsupported code here }
程式碼模板
我們會用下面這個最簡化的程式碼模板來（後續的示例需要用到）作為開始。
Code:- <html>
- <head>
- <title>
- Canvas tutorial
- </title>
- <scripttype="text/javascript">
- function draw() {
- var canvas = document.getElementById('tutorial');
- if (canvas.getContext) {
- var ctx = canvas.getContext('2d');
- }
- }
- </script>
- <styletype="text/css">
- canvas { border: 1px solid black; }
- </style>
- </head>
- <bodyonload="draw();">
- <canvasid="tutorial"width="150"height="150">
- </canvas>
- </body>
- </html>
細心的你會發現我準備了一個名為 draw的函式，它會在頁面裝載完畢之後執行一次（通過設定 body 標籤的 onload屬性），它當然也可以在 setTimeout，setInterval，或者其他事件處理函式中被呼叫。
一個簡單的例子
作為開始，來一個簡單的吧——繪製兩個交錯的矩形，其中一個是有alpha透明效果。我們會在後面的示例中詳細的讓你瞭解它是如何運作的。
- <html>
- <head>
- <scripttype="application/x-javascript">
- function draw() {
- var canvas = document.getElementById("canvas");
- if (canvas.getContext) {
- var ctx = canvas.getContext("2d");
- ctx.fillStyle = "rgb(200,0,0)";
- ctx.fillRect(10, 10, 55, 50);
- ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
- ctx.fillRect(30, 30, 55, 50);
- }
- }
- </script>
- </head>
- <bodyonload="draw();">
- <canvasid="canvas"width="150"height="150">
- </canvas>
- </body>
- </html>
- <canvasid="tutorial"width="150"height="150">
- </canvas>
- </body>
- </html>