摘要：學習資源來自慕課網炫麗的倒計時效果繪圖與動畫基礎，非常感謝老師的課程分享創建標簽的標簽定義了一塊畫布，我們所有的繪圖都是基于這一塊畫布。正是因為是基于狀態的，所以不同的狀態應該有明確的起始標志。

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

學習資源來自慕課網/炫麗的倒計時效果Canvas繪圖與動畫基礎，非常感謝@liuyubobobo 老師的課程分享！

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

    你的瀏覽器版本太tm舊了

為什么直接在標簽里面定義width和height呢，是因為

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

標簽中間的文字內容是當瀏覽器不支持canvas自動出現的提示性話語，在瀏覽器支持canvas時這句話會被省略。

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

在js中，我們這樣定義：

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

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

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

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

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

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

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


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

看看效果如何：

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

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

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

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

未完待續……