讓我們從元素的定義開始吧。
複製**
看起來很像
id 屬性不是專享的，就像標準的htlm標籤一樣，任何乙個html元素都可以指定其 id 值。一般，為元素指定 id 是個不錯的主意，這樣使得在指令碼中應用更加方便。
元素可以像普通一樣指定其樣式（邊距，邊框，背景等等）。然而這些樣式並不會對canvas實際生成的影象產生什麼影響。下面我們會看到如何應用樣式。如果不指定樣式，canvas預設是全透明的。
替用內容
因為 相對較新，有些瀏覽器並沒實現，如firefox 1.0 和 internet explorer，所以我們需要為那些不支援canvas的瀏覽器提供替用顯示內容。
我們只需要直接在canvas元素內插入替用內容即可。不支援canvas的瀏覽器會忽略canvas元素而直接渲染替用內容，而支援的瀏覽器則會正常地渲染canvas。例如，我們可以把一些文字或填入 canvas內，作為替用內容：
current stock price: $3.15 +0.15
複製**
結束標籤 是必須的
建立的固定尺寸的繪圖畫面開放了乙個或多個渲染上下文（rendering context），我們可以通過它們來控制要顯示的內容。我們專注於2d 渲染上，這也是目前唯一的選擇，可能在將來會新增基於opengl es 的 3d 上下文。
初始化是空白的，要在上面用指令碼畫圖首先需要其渲染上下文（rendering context），它可以通過 canvas 元素物件的 getcontext 方法來獲取，同時得到的還有一些畫圖用的函式。getcontext() 接受乙個用於描述其型別的值作為引數。
var canvas = document.getelementbyid('tutorial');
var ctx = canvas.getcontext('2d');
複製**
上面第一行通過 getelementbyid 方法取得 canvas 物件的 dom 節點。然後通過其 getcontext方法取得其畫圖操作上下文。
檢查瀏覽器的支援
除了在那些不支援 的瀏覽器上顯示替用內容，還可以通過指令碼的方式來檢查瀏覽器是否支援 canvas 。方法很簡單，判斷 getcontext是否存在即可。
var canvas = document.getelementbyid('tutorial');
if (canvas.getcontext) else
複製**
**模板
我們會用下面這個最簡化的**模板來（後續的示例需要用到）作為開始。
複製**
細心的你會發現我準備了乙個名為 draw的函式，它會在頁面裝載完畢之後執行一次（通過設定 body 標籤的 onload 屬性），它當然也可以在 settimeout，setinterval，或者其他事件處理函式中被呼叫。
乙個簡單的例子
作為開始，來乙個簡單的吧——繪製兩個交錯的矩形，其中乙個是有alpha 透明效果。我們會在後面的示例中詳細的讓你了解它是如何運作的。
canvas_ex1.png()
2010-4-20 20:07:14
**示例
複製**
深入了解style標籤元素
得到的結果如下圖所示 我們還可以直接在 我們甚至可以在 元素的位置 通常我們都會將元素放置在文件的中。html5規範中為元素引入了乙個scoped屬性。該屬性支援在頁面body的任何地方插入元素，並限制該樣式為元素的直接父元素的樣式。例如 p 這段文字的顏色為黑色。div stylescoped p...
深入了解A
一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹，如果你還對a 演算法不清楚的話，請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式，使用這個源程式時，應該遵守一定的公約。二 a ...
深入了解A
一 前言 在這裡我將對a 演算法的實際應用進行一定的 並且舉乙個有關a 演算法在最短路徑搜尋的例子。值得注意的是這裡並不對a 的基本的概念作介紹，如果你還對a 演算法不清楚的話，請看姊妹篇 初識a 演算法 這裡所舉的例子是參考amit主頁中的乙個源程式，使用這個源程式時，應該遵守一定的公約。二 a ...