1、linecap屬性
linecap 定義上下文中線的端點，可以有以下 3 個值。
2、linejoin屬性
linejoin 定義兩條線相交產生的拐角，可將其稱為連線。在連線處建立乙個填充三角形，可以使用 linejoin 設定它的基本屬性。
3、線寬
linewidth 定義線的寬度(預設值為 1.0)。
4、筆觸樣式
strokestyle 定義線和形狀邊框的顏色和樣式。
後面兩個前面已經說過了，這裡我們著重來看看前兩個屬性。
廢話不多說，直接上**看效果。
"zh">"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支援canvas？！趕快換乙個吧！！
複製**
廢話不多說，直接上**看效果。這段**改自4-3，只是設定了一下連線的屬性。
"zh">"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支援canvas？！趕快換乙個吧！！
複製**
看不清的童鞋自己放大網頁或者自己將**的線寬調寬一點。
這裡有乙個很隱蔽的屬性，就是當linejoin設定為miter時（預設），會解鎖乙個成績，可以使用miterlimit屬性。
舉個例子看看。
"zh">"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支援canvas？！趕快換乙個吧！！
複製**
會發現，這個miterlimit規定了乙個自動填充連線點的極限值。如果超過了這個值，會導致linejoin屬性失效，會從 miter 變成 bevel。可以看出來，這個值和線寬以及夾角有關，具體是啥關係。看下圖。
可以看到，關係有點複雜。有興趣的小夥伴可以推導一下這個值與線寬、夾角的函式關係。其實，大多時候用不到這個隱藏屬性，即便用到了也是憑感覺寫個數然後不滿意再除錯即可。
實際在畫布上繪製線段時，會有一些奇怪的現象發生，這裡融合本節課學到的兩個線段的屬性講解乙個。
"zh">"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支援canvas？！趕快換乙個吧！！
複製**
這 3 個線段和連線的例項有助於說明在畫布上繪製線段時不同屬性的組合。
例項 1 嘗試從畫布左上角開始繪製，結果發生了乙個奇怪的現象。canvas路徑在 x 軸和 y 軸方向上都繪製到了起點的外側。由於這個原因例項 1 上面的線看起來要細些。另外，左上角水平部分中圓形端點也無法看到，它們都被繪製到了螢幕之外的負值座標區域。此外，linejoin定義的對角線斜角也沒有繪出。
例項 2 調整了例子 1 **現的問題,將起始點離開左上角。這樣就繪製出了完整的水平線,並且圓形linecap和斜角 linejoin 都被繪製出來了。
例項 3 顯示了去掉linecap設定後的預設端點效果,並且將linejoin調整為圓角。
至此，線條的所有內容我們已經說完了。這個看起來很簡單的乙個線條，原來還有這麼多內容！藝術家可不是那麼好當的，不過想必也激發了童鞋們的求知慾。canvas究竟有多少內容等待著我們去發現？這是乙個開始，讓我們繼續前行！?
canvas系列教程07 canvas動畫基礎1
上面我們玩了乙個圖表，大家學好結構，然後在那個基礎上去擴充套件各種圖表，慢慢就可以形成自己的圖表庫了。也可以多看看一些國外的圖表庫簡單的版本，分析分析，讀 對提高用處很大。我說了canvas兩大主流用途，乙個是圖表，乙個是遊戲，在寫遊戲專案之前，我們先來點基礎，關於動畫，沒有動畫基礎講canvas遊...
canvas系列教程07 canvas動畫基礎1
上面我們玩了乙個圖表，大家學好結構，然後在那個基礎上去擴充套件各種圖表，慢慢就可以形成自己的圖表庫了。也可以多看看一些國外的圖表庫簡單的版本，分析分析，讀 對提高用處很大。我說了canvas兩大主流用途，乙個是圖表，乙個是遊戲，在寫遊戲專案之前，我們先來點基礎，關於動畫，沒有動畫基礎講canvas遊...
canvas系列教程08 canvas各種坑
首先是編輯器，之前用了用atom，這幾天寫了乙個canvas圖表庫，全程使用atom，說下感受。webstorm 就相當於你媽，你想要的不想要的都給你，但是顯得有點嘮嘮叨叨 功能太全，好多用不上，開啟慢 而atom就相當於你的兒子，一張白紙，只要你調理的好，太就會按照你的想法去做事兒 簡潔的介面，豐...