Canvas是html5的新標(biāo)簽，看起來(lái)很屌的樣子其實(shí)理解了就不難。Canvas意為畫布，簡(jiǎn)單的來(lái)說通過Canvas提供的一些接口方法在這個(gè)指定的畫布中畫出我們想要的圖片與執(zhí)行一系列的動(dòng)作。

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

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

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

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

2點(diǎn)確定一條線，moveTo與lineTo大概就是這個(gè)意思。但是會(huì)發(fā)現(xiàn)畫布上沒有預(yù)想中的線，什么也沒有。因?yàn)槲覀冞€少了一個(gè)步驟.lineTo其實(shí)是畫的一條“路徑”，本身是不可見的。如果要讓他顯示出來(lái)，我們必須對(duì)他進(jìn)行“畫”的操作。

用過PS的同學(xué)，肯定能知道圖形的兩種模式，一種是填充，另一種是描邊。現(xiàn)在我們已經(jīng)畫了一條線，相當(dāng)于PS中勾了一條路徑，此時(shí)給路徑描一下邊，就能顯示出圖形了。

ctx.stroke();

總的來(lái)說：Canvas繪制的總體的步驟

• 創(chuàng)建HTML頁(yè)面，設(shè)置畫布標(biāo)簽
• 編寫js，獲取畫布dom對(duì)象
• 通過Canvas標(biāo)簽的Dom對(duì)象獲取上下文
• 設(shè)置繪制線樣式、顏色
• 繪制矩形，或者填充矩形