canvas中arcTo的畫弧原理？

        相信每個熟悉html5的猿猿都知道，canvas是html5提供的一個強大的繪圖工具，今天同事忽然跟我聊起canvas中的arcTo方法，決定來記錄一下這其中原理。

        網上關於canvas該方法的相關資料不多，剛接觸這個方法時，我也摸索了好久。arcTo這個方法其實就是畫曲線的，而且畫出的曲線也是圓的一段弧，這一點跟另外一個arc方法同樣，可是它的參數跟arc卻相差很大。

        ctx.arcTo(x1,y1,x2,y2,radius);該方法參數中包括兩個點，若是你以爲這兩個點跟圓有關的畫，那就錯了，這些參數中僅僅最後一個參數是圓的半徑，下面的是個人代碼：

        代碼看起來不少，其實第30行以後的部分纔是畫弧的實現，前面代碼是爲了方便描述用路徑追蹤了弧線相關的幾個座標點：起點，第一個點，第二個點，下面是運行結果：

 

 

        藍色直線是追蹤路徑，黑色部分纔是弧線，這樣就看得很直觀了，實際上是經過起點、第一個點，第二個點的兩條直線，組成的三角區域（夾角），這兩條直線也是圓的切線，而半徑決定了圓弧的位置，半徑越小越靠近夾角，半徑越大越遠離。下面是將半徑由50改成80後的運行結果：

 

 

    繼續改參數，下面縮短起點與第一個點的距離，代碼以下：

 

 

        這會現象就比較驚人了，看效果：

 

        這個圓依然是和兩條線相切的，可是切線被掰倒了反方向，arcTo方法中有個很重要的點，這個重要的點就是代碼31行中的起點,只要它到圓的切點的距離，小於它到第一個點的距離，就會發生反轉，由於此時切線知足不了這個圓了，而第二個點座標能夠無限變化，因此在使用時，注意第一個點與起點的設置，這是關鍵。

若有不當之處，歡迎指正！

技術交流，乾貨分享，歡迎關注我的微信公衆號：CodingInfo