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

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

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

在開(kāi)始之前我們先拿出畫(huà)布和畫(huà)筆：如果需要畫(huà)一條直線(xiàn)

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

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

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

ctx.stroke();

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

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