一、Canvas是什么？
Canvas就是一個畫布，可以進行畫任何的線、圖形、填充等一系列的操作，而且操作的畫圖就是js，所以讓js編程到了嗑葯的地步。另外Canvas不僅僅提供簡單的二維矢量繪圖，也提供了三維的繪圖，以及圖片處理等一系列的api支持。
二、Canvas重要Context對象
(1) 要使用Canvas來繪制圖形必須在頁面中添加Canvas的標簽。
例如： <canvas id="demoCanvas" width="500" height="500"> <p>爺，你還在上個世紀吧，現在都html5了，您還在ie6時代？</p> </canvas>
(2) 當然只有上面的標簽，只能是創建好了一個畫布，其中width和height屬性就是設置畫布的大小。Id屬性也是必須的，后面要用Id來拿到當前的Canvas的Dom對象。通過此Canvase的Dom對象就可以獲取他的上下文了，Canvas繪制圖形都是靠着Canvas對象的上下文對象.
代碼：<script type="text/javascript">
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：獲取上下文
var context = canvasDom.getContext('2d');
</script>
(3) Context上下文默認兩種繪制方式：第一種：繪制線（stroke），第二種：填充：fill。
注意：決定了使用哪種方式之后，在填充或者繪制線之前先設置樣式。三、Canvas Fisrt Demo：畫一個立體透明的矩形
Canvas繪制的總體的步驟
- 創建HTML頁面，設置畫布標簽
- 編寫js，獲取畫布dom對象
- 通過Canvas標簽的Dom對象獲取上下文
- 設置繪制線樣式、顏色
- 繪制矩形，或者填充矩形
Canvas繪制一個矩形和填充一個矩形的Demo
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>爺，你還在上個世紀吧，現在都html5了，您還在ie6時代？</p>
</canvas>
<!---下面將演示一種繪制矩形的demo--->
<script type="text/javascript">
//第一步：獲取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：獲取上下文
var context = canvasDom.getContext('2d');
//第三步：指定繪制線樣式、顏色
context.strokeStyle = "red";
//第四步：繪制矩形，只有線。內容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
最終效果下圖：
四、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>