在學畫畫的時候，線條是最基本的了，而線條的鏈接能夠組成任何圖形。在Canvas中也是如此。
在開始以前咱們先拿出畫布和畫筆：
複製代碼
代碼以下:
var cvs = document.getElementById('cvs'); //畫布
var ctx = cvs.getContext('2d'); // 畫筆
咱們畫畫的時候，落筆點是不固定的，隨時都會變。canvas雖然不是經過手來決定落筆點，但也有一個方法,就是moveTo。moveTo的做用至關於把筆尖提離畫布，而後移動到指定的點（即座標）。
複製代碼
代碼以下:
ctx.moveTo(x,y)
此過程當中不會畫出任何圖形，至關於你提着筆在畫布上晃來晃去。
但晃來晃去是沒用的，咱們必須開始畫。先畫最簡單的：直線
畫直線的方法即lineTo，他的參數和moveTo同樣的，都是一個點。
ctx.lineTo(x,y)固然，你畫線的時候，落筆點也跟着移動了，因此lineTo以後落筆點就變成了他的目標點了。
複製代碼
代碼以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
此時你刷新網頁，會發現畫布上沒有預想中的線，什麼也沒有。由於咱們還少了一個步驟.lineTo實際上是畫的一條「路徑」，自己是不可見的。若是要讓他顯示出來，咱們必須對他進行「畫」的操做。
用過PS的同窗，確定能知道圖形的兩種模式，一種是填充，另外一種是描邊。如今咱們已經畫了一條線，至關於PS中勾了一條路徑，此時給路徑描一下邊，就能顯示出圖形了。
canvas描邊的方法是stroke().如今讓咱們把代碼補全：
複製代碼
代碼以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();此時刷新，就能看到一條線了。固然，你也能夠連續繪製出幾百條路徑，再執行描邊動做，便可一下畫出幾百條線。如今咱們來用4條線畫一個矩形：
複製代碼
代碼以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.stroke();
這裏咱們就是先繪出所有路徑，再一次性描邊。
——–做者的抱怨：Canvas繪圖有個很差的地方就是：基本靠猜，很不直觀。
嚴重提示：canvas的繪圖過程（即填充與描邊）是很是消耗資源的，若是想節省系統資源提升效率，最好是繪製好全部路徑，再一次性填充或描邊圖形。
由上面的圖形咱們能夠看出，默認的線條粗細是1px，而線條顏色是黑色。固然咱們能夠設置他們,但奇怪的是設置線條寬度是lineWidth，而設置線條樣式的卻叫strokeStyle，爲何不是lineStyle呢？我也不知道。：
複製代碼
代碼以下:
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
上面的代碼把線條寬度設置成了10px，線條顏色變成了半透明的紅色。
問題：若是我畫的矩形路徑是寬高都是100，此時個人邊線寬度是10px，那麼這個描了邊的矩形總體寬高是多少？是100+10*2=120嗎？
若是邊線是徹底描在路徑外側的話，那麼就是120。但Canvas不是。Canvas中的線條都有一條「中線」，這條中線位於line的絕對中間，線條的筆畫以中線向兩側擴展。好比你的線條寬度是1，那麼中線就在0.5的位置；寬度是5，那麼中線就是在2.5。canvas的圖形在描邊的時候，都是路徑與line的中線貼合，而後描邊。如圖2：
因此，描邊的時候線的一半在外側，一半在內側，即上面的矩形的總體寬度是100+(10/2)*2，等於110.
也正是由於這個緣由，左上角出現缺角就理所固然了。由於這裏沒人畫。
但爲何其他的角沒有出現缺口呢？看你的圖不是4個角都有缺口嗎？
那是由於，我畫線的過程當中沒有把畫筆「提起來」，畫筆是連續的，即沒有moveTo過。不信咱們如今來moveTo一下：
複製代碼
代碼以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.moveTo(200,100); //注意這裏
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
咱們再畫第二條線以前moveTo了一下，並且moveTo連座標都沒變，仍是那個點，但刷新後圖形變成了這個樣子[圖3]：
明白了？由於咱們把筆提起來了。
如今咱們刪掉moveTo，不要糾結他了，咱們來思考一下如何把左上角那個缺角給補上？
首先問個問題，咱們的路徑閉合了嗎？這不是廢話麼，咱們不是已經把路徑繞回原點了麼？固然算是閉合了！
錯！這樣只是讓路徑最後一個點和起點重合了而已，路徑自己卻沒有閉合！
Canvas怎麼閉合路徑？用closePath().
複製代碼
代碼以下:
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.closePath();//閉合路徑
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();
此時刷新，就是一個完美的正方形了。圖4：
不管咱們把線條改到多粗————越粗越有人喜歡是吧？————這個四方形的四個角都是規矩的直角，不會出現圓滑的狀況。圓滑的角是什麼狀況？請看PS中的四方形描邊，圖5：
看到了吧，越粗的邊線，他的角的圓弧越大。
若是我想Canvas裏面的邊線也和PS這種同樣，有沒有辦法呢？固然有，就是lineJoin屬性。
lineJoin，意思即線的交匯處，有3個屬性：miter(默認，尖角)，bevel（斜角）,round（圓角），如圖6：
毫無疑問咱們一下就能明白咱們的矩形用的是尖角，因此試着把他改爲圓角看看：
圖形變成了這樣，圖7：
有點像PS的了吧？
另外，經過前面圖咱們瞭解到，Canvas的線條兩端是平的，可不能夠改呢？畢竟平的很差看。
也是能夠的，即lineCap屬性，這個就是定義線條的端點。lineCap有3個值：butt（平，默認）,round（圓）,square（方），如圖8
看圖就能發現，其實平頭跟方頭是同樣的，區別只是平頭沒有伸出去那麼一截。圓頭和方頭都會伸出去一截，這一節是多長呢？就是線條寬度的一半。
你有沒有想到什麼？哈哈，前面的閉合路徑的問題，若是咱們把lineCap設爲方頭，效果也是同樣的！
但爲了保險起見，咱們仍是要把路徑閉合了，切記！
我還要提醒一下：閉合的路徑沒有端點！因此閉合的路徑上看不到端點的樣式。
另外：lineCap與lineJoin有點類似，注意不要搞混。
若是你眼尖而且運氣很差，你可能會發現有時候1像素的線條不是1像素寬，好像要寬一些，模糊一些。如圖9：
恭喜你!你遇到了一個不是bug的bug。這個很特別，我把他放到下一篇文章講吧