canvas（二）繪製路徑-簡單技術大用途

回顧

以前已經會繪製、填充矩形了。雖然懵懂，可是api設計仍是很友好的，不死死記住api，摸索一點套路，讓學習事半功倍：

fill 填充
stroke 繪製
改變顏色 xxxStyle 屬性接收一個字符串參數
雖然不知道對不對，但終歸是本身總結的，先這麼構建了本身的‘世界觀’，之後感受不對在完善本身的抽象‘認知’， 這是個人一種學習方式。

直線繪製路徑--三角形

還記得初中數學學到的：點構成線、線構成面、面構成體...，要繪製一個圖形咱們能想到的就是一筆筆繪畫，而後塗彩。

• 好吧，命令你的瀏覽器拿起筆，開始畫畫

  api： beginPath()            // 當canvas建立時 默認調用

• 你須要找一個起點/ 把你的筆在某一點作個點

  lineTo(x,y)        // xy 爲座標

• 繼續在別的點作點（任意個）

  lineTo（x1,y1）

• 作點完畢 是否回到原點（閉合）

  closePath()                    -- 要不要閉合 可選

• 點作好了

  如今將點鏈接起來： stroke（）                        // stroke  調用繪製
     或者在區域內塗色（填充）： fill（）                     //  fill 調用填充

• 若是要修改顏色呢 xxxStyle 設置便可

  fillStyle = 'red'        // 填充顏色    
     strokeStyle    = 'blue'    // 繪製顏色

曲線繪製路徑--圓形 arc

arc(x, y, r, beginAngle, endAngle, counterclockwise )    
    //  x座標，y座標，半徑， 開始點（弧度角）， 結束點， 順/逆時針（默認false 順時針）

回想一下初中數學知識點：

一、 圓是以一個點爲中心 到這個點爲定長的點組成的圖形
二、 1弧度等於弧長爲r的弧所對應的圓心角
三、 圓的周長的2πr 半徑r 因此圓的弧度爲2π
... ...

使用這些簡單的知識點就能夠繪製咱們想要的弧度了；

用上面的知識作點啥？

作點什麼？本身實現點吧！