Canvas繪圖API Demos
上一篇文章中，筆者已經給大家演示了怎么快速用Canvas的API繪制一個矩形出來。接下里我會在本文中給各位介紹Canvas的其他API：繪制線條、繪制橢圓、繪制圖片、圖片處理等...如果想獲得更好的閱讀效果請點擊老馬的獨立博客地址。
一、Canvas繪制線條
Context對象的beginPath方法表示開始繪制路徑，moveTo(x, y)方法設置線段的起點，lineTo(x, y)方法設置線段的終點，stroke方法用來給透明的線段着色。moveto和lineto方法可以多次使用。最后，還可以使用closePath方法，自動繪制一條當前點到起點的直線，形成一個封閉圖形，省卻使用一次lineto方法。
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
//通過id獲得當前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.beginPath(); // 開始路徑繪制
context.moveTo(20, 20); // 設置路徑起點，坐標為(20,20)
context.lineTo(200, 200); // 繪制一條到(200,20)的直線
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; // 設置線寬
context.strokeStyle = "#CC0000"; // 設置線的顏色
context.stroke(); // 進行線的着色，這時整條線才變得可見
</script>
</body>
二、Canvas繪制文本
Context上下文對象的fillText(string, x, y)方法是用來繪制文本，它的三個參數分別為文本內容、起點的x坐標、y坐標。使用之前，需用font設置字體、大小、樣式（寫法類似與CSS的font屬性）。與此類似的還有strokeText方法，用來添加空心字。另外注意一點：fillText方法不支持文本斷行，即所有文本出現在一行內。所以，如果要生成多行文本，只有調用多次fillText方法。
以下是代碼Demo：
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.moveTo(200,200);
// 設置字體
context.font = "Bold 50px Arial";
// 設置對齊方式
context.textAlign = "left";
// 設置填充顏色
context.fillStyle = "#005600";
// 設置字體內容，以及在畫布上的位置
context.fillText("老馬!", 10, 50);
// 繪制空心字
context.strokeText("blog.itjeek.com!", 10, 100);
</script>
三、Canvas繪制圓形和橢圓
在上一篇文章中，筆者已經跟大家介紹過了繪制矩形，繪制其他形狀，比如圓形等，都是一個思路，只不過是方法不同罷了。那接下里給各位演示一小繪制圓形和橢圓。Context上下文的arc方法就是繪制圓形或者橢圓，arc方法的x和y參數是圓心坐標，radius是半徑，startAngle和endAngle則是扇形的起始角度和終止角度（以弧度表示），anticlockwise表示做圖時應該逆時針畫（true）還是順時針畫（false）。
以下是繪制圖形的Demo：
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.beginPath();//開始繪制路徑
//繪制以 （60,60）為圓心，50為半徑長度，從0度到360度（PI是180度），最后一個參數代表順時針旋轉。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//線的寬度
context.strokeStyle = "#000";//線的樣式
context.stroke();//繪制空心的，當然如果使用fill那就是填充了。
</script>
還不趕快動手試一下？
四、Canvas繪制圖片
Canvas繪制圖片應該是他的一大特點或者是亮點吧。當然配合File的API，讓JS變得無可匹敵。那接下里給大家演示一下怎樣繪制圖片，並且做出一個立體效果出來。
以下是繪制圖片的Demo：
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通過id獲得當前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
var image = new Image();//創建一張圖片
image.src = "Images/a.png";//設置圖片的路徑
image.onload = function() {//當圖片加載完成后
for (var i = 0; i < 10; i++) {//輸出10張照片
//參數：（1）繪制的圖片 （2）坐標x，（3）坐標y
context.drawImage(image, 100 + i * 80, 100 + i * 80);
}
};
</script>
還不趕快動手試一下？
五、總結
Canvas總算介紹了最基本的用法了。當然本文大量借鑒了其他網站的例子。作者也是把最基本的精華部分羅列了一下。總體來說Canvas繪制圖片和文本、形狀都不是很難，API代碼上手難度基本就是初級。但是由此而帶來的非常多的可能，讓Html5真正的強大到無可比擬的地步。
當然本文並沒有涉及到Canvas3D繪制的相關內容，而且關於Canvas繪制漸變色、繪制陰影、圖片的相關處理操作等，這些內容，如果讀者確實需要的可以自行搜索查找相關資料或者直接閱讀Html5的最新標准文檔。
本文參考：http://javascript.ruanyifeng.com/htmlapi/canvas.html