也就是說，我繪製1px，他會從上述的「中線「，向左右（或上下）各衍生出0.5px。
此時又有個問題，因為計算機不允許出現小於1px的圖形，所以他做了個折中的問題，把兩邊都繪製了。
所以，如此一來，本來1px的線條，看起來2px寬的線條。而且顏色還有點灰，不是純黑色，按照自己的
理解，應該是拉伸的是0.5px的線條，所以顏色還沒有達到飽和。
首先，我們不管設定線的寬度還是線的顏色，他都是上下文context的乙個屬性，他最後描邊呈現出現的就是我們設定的值。結合例子來說，假設我們上述例子沒有使用ctx.beginpath()，結果會是三條寬度30和顏色為blue的線。所以，正常我們的邏輯，就是描軌跡，然後使用stroke描邊，那麼，我們將他變成3條軌跡，並且ctx.stroke();描邊即可。beginpath（）就是這麼乙個方法，開啟新的軌跡。
###填充三角形
判斷是否填充方法
看一塊區域是否填充
從這個區域拉一條直線
看和這條直線相交的軌跡
如果順時針軌跡+1
如果逆時針軌跡-1
所有的軌跡的值計算出來
如果是非0那麼填充
如果是0那麼不填充
ctx.canvas.height和ctx.canvas.width
獲取元素和上下文
設定網格大小，並取得canvas寬高
通過canvas寬高和網格大小，計算出我們網格需要繪製多少條橫線和豎線
利用迴圈來繪製
確定原點
確定距離畫布旁邊的距離
確定座標軸的長度
確定箭頭的大小 是個等腰三角形
繪製箭頭填充
每乙個座標，是由乙個正方形表示的，座標是這個正方形的中心點
確定點的尺寸，即正方形的邊長
通過計算，可以得到座標周圍的四個點
那麼，我們可以知道，繪製折線圖，需要用到很多屬性和方法，比如網格中格仔的大小啦，座標系中的原點，繪製的時候，如何繪製等等。
思路分析到這，可以得知，我們畫乙個折線圖，可以用建構函式來構造。
確定圓心
確定半徑
確定起始繪製的位置和結束繪製的位置 確定弧的長度和位置 startangle endangle 弧度
取得繪製的方向 direction 預設是順時針 false 逆時針 true
接著畫出圓弧
然後閉合路徑即可
根據資料繪製乙個餅狀圖
繪製標題 從扇形的弧中心伸出一條線在畫一條橫線在橫線的上面寫上文字標題
在畫布的左上角 繪製說明 乙個和扇形一樣顏色的矩形 旁邊就是文字說明
Canvas入門筆記 實現極簡畫筆
今天學習了html5 canvas入門，已經有大神寫得很詳細了 在學習過後自己寫了乙個簡單的擴充套件 實現畫板畫筆功能，效果如下 滑鼠按下，開始書寫 18 canvas mousedown function 23 滑鼠抬起，結束書寫 24 canvas mouseup function 29 vie...
canvas入門之畫線
在hmtl 中建立好canvas之後，就可以在js裡面對canvas進行操作了 var canvas document.getelementbyid canvas var context canvas.getcontext 2d 獲取繪圖上下文環境 canvas.width 500 設定畫布寬高 c...
canvas快速入門（二）
ctx.linecap round 超出去的圓角 butt 未出頭的 squre 出頭的ctx.linejoin bevel 平角 round 圓角 miter 尖角ctx.linewidth 5 ctx.strokestyle red ctx.fillstyle ffdd88 ctx.beginp...