Canvas是html5的新標簽，看起來很屌的樣子其實理解了就不難。Canvas意為畫布，簡單的來說通過Canvas提供的一些接口方法在這個指定的畫布中畫出我們想要的圖片與執行一系列的動作。

<canvas id="cvs"></canvas>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');

canvas是畫布，getContext就好比是筆，通過ctx可以調用一堆的方式在畫布上畫圖了。在學畫畫的時候，線條是最基本的了，而線條的連接可以組成任何圖形。在Canvas中也是如此。

在開始之前我們先拿出畫布和畫筆：如果需要畫一條直線

ctx.moveTo(50,50);
ctx.lineTo(200,200);

2點確定一條線，moveTo與lineTo大概就是這個意思。但是會發現畫布上沒有預想中的線，什么也沒有。因為我們還少了一個步驟.lineTo其實是畫的一條“路徑”，本身是不可見的。如果要讓他顯示出來，我們必須對他進行“畫”的操作。

用過PS的同學，肯定能知道圖形的兩種模式，一種是填充，另一種是描邊?，F在我們已經畫了一條線，相當于PS中勾了一條路徑，此時給路徑描一下邊，就能顯示出圖形了。

ctx.stroke();

總的來說：Canvas繪制的總體的步驟

• 創建HTML頁面，設置畫布標簽
• 編寫js，獲取畫布dom對象
• 通過Canvas標簽的Dom對象獲取上下文
• 設置繪制線樣式、顏色
• 繪制矩形，或者填充矩形