HTML5之Canvas 2D入門1
Canvas歷史
canvas是一個新的HTML元素，這個元素可以被指令碼語言(通常是JavaScript)用來繪製圖形。例如可以用它來畫圖、合成圖象、或做動畫。canvas最先在蘋果公司(Apple)的Mac OS X Dashboard上被引入，而後被應用於Safari。後面被採用成為HTML5標準規範的一部分。這個元素的引入帶來了非同凡響的影響：從此，瀏覽器原生支援圖形繪製與動畫了。canvas的引入，再加上Audio與Video的支援，HTML5必將帶來網頁遊戲的蓬勃發展。
Canvas基本屬性
canvas只有兩個屬性，width 和 height，兩個都是可選的，並且都可以用DOM或者CSS來設定。如果不指定width和height，預設的值是寬300畫素，高150畫素。雖然可以通過 CSS 來調整canvas的大小，但渲染影象會通過縮放來適應佈局的（如果你發現渲染結果看上去變形了，不必一味依賴CSS，可以嘗試顯式指定canvas的width和height屬性值）。
除此以外，像id這種標準HTML元素都可以指定的屬性，canvas也可以使用。一般，為元素指定id 是個不錯的方案，這樣使得在指令碼中應用更加方便。
獲取渲染上下文
使用JS操作canvas的第一步就是獲取渲染上下文。
canvas建立的固定尺寸的繪圖畫面開放了一個或多個渲染上下文（rendering context），我們可以通過它們來控制要顯示的內容。目前支援2D渲染(直接的API支援)，3D渲染(通過WebGL實現的)。
canvas初始是空白的，要在上面用指令碼畫圖首先需要獲得渲染上下文，它可以通過 canvas 元素物件的 getContext方法來獲取。getContext()接受一個用於描述其型別的值作為引數。目前可用的引數值是”2d”，也支援”webgl”(獲得WebGL 3D渲染上下文，這個到總結WebGL的時候詳細說明)。
一般我們會輔助以DOM方法getElementById取得canvas物件的DOM節點。然後通過其getContext方法取得其畫圖操作上下文。如下所示：
var canvas = document.getElementById('lesson01');
var ctx = canvas.getContext('2d');但是為了安全起見，我們一般需要先判斷瀏覽器是否支援cavas，也就是需要判斷getContext是否存在。下面是完整的程式碼：
var canvas = document.getElementById('lesson01');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here 繪製文字
繪製文字需要用到下列的屬性和方法：
context.font屬性
獲取或設定文字的字型和大小。設定該屬性的字串語法與CSS語法中的font是一樣的，不能解析成CSS的值會被忽略掉。
context.textAlign屬性
獲取或設定字型的對其方式。只允許下列值:start, end, left, right, 和center。其他值會被忽略，預設值是start。
context.textBaseline屬性
獲取或設定字型的基準線。有效的值如下：top, hanging, middle, alphabetic, ideographic, bottom。其他值會被忽略，預設值是alphabetic。
context.fillText(text, x, y [, maxWidth ] )
該方法用於在指定的位置繪製文字。如果設定了maxWidth，則會調整字串使之符合這個條件。
context . strokeText(text, x, y [, maxWidth ] )
該方法用於在指定的位置繪製鏤空的文字。
例子如下：
<!DOCTYPE HTML>
<html>
<body>
<canvas id="lesson" width="300"height="200">
<p>Your browser does not support the canvas element!</p>
</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas =document.getElementById("lesson");
var context =canvas.getContext("2d");
context.font ="30px Times New Roman";
context.fillText("HelloCanvas!", 10, 35);
}
</script>
</body>
</html>繪製圖片
繪製圖片可以有下面幾種方式：
繪製原圖：context.drawImage(image, dx, dy)
縮放繪圖：context.drawImage(image, dx, dy, dw, dh)
切片繪圖：context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
合理的繪製多幅影象可以做出漂亮的組合效果，比如常見的畫廊就是框圖片與照片的疊加，只不過要注意繪製的先後順序。
第一個引數image代表圖片的來源，可以是下列幾種：
(1)頁面內的圖片:我們可以通過 document.images 集合、document.getElementsByTagName 方法又或者 document.getElementById 方法來獲取頁面內的圖片。
(2)已經完備的canvas：可以使用document.getElementsByTagName或document.getElementById方法來獲取已經準備好的canvas元素。一個常用的場景就是為另一個大的canvas做縮圖。
(3)通過data:url方式(http://en.wikipedia.org/wiki/Data:_URL)嵌入影象：Data urls允許用一串Base64編碼的字串的方式來定義一個圖片。其優點就是圖片內容即時可用，無須再到伺服器兜一圈。（還有一個優點是，可以將CSS，JavaScript，HTML和圖片全部封裝在一起，遷移起來十分方便。）缺點就是影象沒法快取，圖片大的話內嵌的url資料會相當的長。例如：
var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; (4)動態建立的圖片：我們可以用指令碼建立一個新的Image物件，但這種方法的主要缺點是如果不希望指令碼因為等待圖片裝置而暫停，還得需要突破預裝載。
var img = new Image();
img.src = 'myImage.png';當指令碼執行後，圖片開始裝載。若呼叫drawImage時，圖片沒裝載完，指令碼會等待直至裝載完畢。如果不希望這樣的效果，則需要使用圖片的onload事件。(見下面的例子)
其他幾個引數的含義：sx,sy是Image在源中的起始座標，sw/sWidth,sh/sHeight是源中圖片的寬和高，dx,dy是在目標中的座標，dw/dWidth,dh/dHeight是目標的寬和高。具體可以參看下圖：
<?doctype html>
<html>
<head>
<title>cavas tests</title>
<script type="text/javascript">
function onStart() {
var canvas = document.getElementById("lesson01");
if(canvas.getContext)
{
var context = canvas.getContext("2d");
var pic = new Image();
pic.onload=function(){
context.drawImage(pic,0, 0);
}
pic.src = "http://imgsrc.baidu.com/forum/pic/item/e6b14bc2a4561b1fe4dd3b24.jpg";
}
}
</script>
</head>
<body onload="onStart();">
<canvas id="lesson01" width="500" height="500">
Your browser does not support Canvas.
</canvas>
</body>
</html>