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

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

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

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

    你的瀏覽器版本太tm舊了

為什么直接在標(biāo)簽里面定義width和height呢，是因為

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

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

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

在js中，我們這樣定義：

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

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

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

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

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

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

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


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

看看效果如何：

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

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

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

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

未完待續(xù)……