引言：Canvas繪圖API快速入門
在接觸HTML5的初學者包括我都在很多地方見到非常炫的一些頁面，甚至好多學習HTML5的開發者都是沖着Web端的頁游去的，那么HTML5那么絢麗的頁面效果以及游戲動畫效果的原理是怎樣的？本篇文章將帶您在20分鍾內快速了解和上手HTML5游戲開發的神器：Canvas繪制API。
一、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>
最終效果下圖：
