摘要：學(xué)習(xí)資源來(lái)自慕課網(wǎng)炫麗的倒計(jì)時(shí)效果繪圖與動(dòng)畫(huà)基礎(chǔ)，非常感謝老師的課程分享創(chuàng)建標(biāo)簽的標(biāo)簽定義了一塊畫(huà)布，我們所有的繪圖都是基于這一塊畫(huà)布。正是因?yàn)槭腔跔顟B(tài)的，所以不同的狀態(tài)應(yīng)該有明確的起始標(biāo)志。

喜歡前端，學(xué)習(xí)前端的最原始的動(dòng)機(jī)，就是因?yàn)樗梢灾谱鞣浅？犰诺男Ч?。然而現(xiàn)在上班所用的技巧，多是在業(yè)務(wù)邏輯那一塊，并非是我最初想要去做的東西。所以在下班以后，打算重新拾起自己的興趣，去學(xué)習(xí)真正的“酷炫”的東西。
Canvas，就是能夠讓我實(shí)現(xiàn)目標(biāo)的利器之一。希望通過(guò)這一個(gè)筆記，能夠督促我高效完成學(xué)習(xí)，并且把學(xué)習(xí)的感悟分享出來(lái)。

學(xué)習(xí)資源來(lái)自慕課網(wǎng)/炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ)，非常感謝@liuyubobobo 老師的課程分享！

html5的標(biāo)簽定義了一塊“畫(huà)布”，我們所有的繪圖都是基于這一塊畫(huà)布。所以在頁(yè)面上我們先聲明一個(gè)帶id的canvas標(biāo)簽

    你的瀏覽器版本太tm舊了

為什么直接在標(biāo)簽里面定義width和height呢，是因?yàn)?/p>

這里面的width和height是canvas自己的屬性，并非css3的屬性。如果只用css3定義寬高的話只是限制了這塊畫(huà)布的大小，對(duì)內(nèi)容的分辨率等顯示問(wèn)題并無(wú)約束（這句話有待考證）。而直接在標(biāo)簽里定義這兩個(gè)屬性的好處是能夠一并地解決畫(huà)布大小與實(shí)際顯示的問(wèn)題。

標(biāo)簽中間的文字內(nèi)容是當(dāng)瀏覽器不支持canvas自動(dòng)出現(xiàn)的提示性話語(yǔ)，在瀏覽器支持canvas時(shí)這句話會(huì)被省略。

在創(chuàng)建好頁(yè)面標(biāo)簽以后，開(kāi)始進(jìn)入實(shí)際的canvas繪制。它是完全通過(guò)js控制的，所以我們有關(guān)畫(huà)圖的一切都是在js中進(jìn)行

在js中，我們這樣定義：

var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");

首先獲取canvas對(duì)象，然后執(zhí)行它的.getContext("2d")方法，建立一個(gè)繪圖上下文環(huán)境cxt。以后所有在這一塊畫(huà)布進(jìn)行的繪制，都是調(diào)用這個(gè)cxt不同的方法來(lái)完成。環(huán)境搭建好了，就可以進(jìn)行真正的操作啦！

教程上說(shuō)得很明白，在這里就不繼續(xù)贅述了，主要總結(jié)出不同方法的作用，效果，及其注意事項(xiàng)。

//把筆尖放在畫(huà)布100, 100的位置
cxt.moveTo(100, 100)
//從100，100畫(huà)到700，700
cxt.lineTo(500,500)
//繼續(xù)畫(huà)完它
cxt.lineTo(500,100)
cxt.lineTo(100,100)
//設(shè)置線條寬度
cxt.lineWidth = 5
//設(shè)置線條樣式（顏色）
cxt.strokeStyle = "pink"
//設(shè)置填充色
cxt.fillStyle = "lightblue"
cxt.fill()
//告訴canvas我畫(huà)完了，執(zhí)行stroke()方法
cxt.stroke()

老師在教程里反復(fù)強(qiáng)調(diào)了一點(diǎn)，就是canvas是基于“狀態(tài)”的繪圖，也就是當(dāng)我怎樣定義moveTo()，lineTo()之類的方法的時(shí)候，我定義的是一種“我想怎么怎么去畫(huà)”的狀態(tài)，是“未下筆”的，而當(dāng)我已經(jīng)想好了，定義好了這個(gè)狀態(tài)以后，才執(zhí)行“把想法畫(huà)出來(lái)”的方法，即執(zhí)行.fill()、.stroke()等方法，告訴canvas“我要畫(huà)了??！”，然后把內(nèi)容畫(huà)出來(lái)。

正是因?yàn)閏anvas是基于狀態(tài)的，所以不同的狀態(tài)應(yīng)該有明確的起始標(biāo)志。如果我們想畫(huà)不同顏色的一個(gè)三角型和一條直線，我們可能會(huì)這么寫(xiě)

//把筆尖放在畫(huà)布100, 100的位置
cxt.moveTo(100, 100)
//從100，100畫(huà)到700，700
cxt.lineTo(500,500)
//繼續(xù)畫(huà)完這個(gè)三角形
cxt.lineTo(500,100)
cxt.lineTo(100,100)
//設(shè)置三角形線條顏色為粉紅色（我特喜歡粉）
cxt.strokeStyle = "pink"
//告訴canvas我畫(huà)完了，執(zhí)行stroke()方法
cxt.stroke()


//畫(huà)一條新的線
cxt.moveTo(50, 100)
cxt.lineTo(450,500)
//設(shè)置這條線的顏色為淺藍(lán)色
cxt.strokeStyle = "lightblue"
//告訴canvas我畫(huà)完了，執(zhí)行stroke()方法
cxt.stroke()

看看效果如何：

因?yàn)閏anvas基于狀態(tài)，然而這倆的狀態(tài)并沒(méi)有被區(qū)分（canvas沒(méi)那么智能），所以后面的cxt.strokeStyle = "lightblue"會(huì)把前面的給覆蓋掉，也就是它只有一個(gè)線條顏色的狀態(tài)。那么如何給它定義不同的狀態(tài)呢？有兩個(gè)方法,請(qǐng)看代碼

cxt.beginPath()
//把筆尖放在畫(huà)布100, 100的位置
cxt.moveTo(100, 100)
//從100，100畫(huà)到700，700
cxt.lineTo(500,500)
//繼續(xù)畫(huà)完這個(gè)三角形
cxt.lineTo(500,100)
cxt.lineTo(100,100)
//設(shè)置三角形線條顏色為粉紅色（我特喜歡粉）
cxt.closePath()
cxt.strokeStyle = "pink"
//告訴canvas我畫(huà)完了，執(zhí)行stroke()方法
cxt.stroke()

cxt.beginPath()
//畫(huà)一條新的線
cxt.moveTo(50, 100)
cxt.lineTo(450,500)
cxt.closePath()
//設(shè)置這條線的顏色為淺藍(lán)色
cxt.strokeStyle = "lightblue"
//告訴canvas我畫(huà)完了，執(zhí)行stroke()方法
cxt.stroke()

其中，beginPath()告訴canvas我想會(huì)從這里開(kāi)始畫(huà)一段路徑，closePath()聲明路徑的結(jié)束。雖然這兩個(gè)方法在包裹著.stroke()方法時(shí)也生效，但是為了語(yǔ)義化，path指的是路徑，所以我們把這兩個(gè)方法僅用于包裹路徑即可?？纯葱Ч?/p>

未完待續(xù)……