【繪製】HTML5 Canvas 實現任意圓角多邊形

我的處女作《Canvas系列教程》在我的Github上正在連載更新，希望能得到您的關注和支持，讓我有更多的動力進行創作。

教程介紹、教程目錄等能在README裏查閱。

傳送門：https://github.com/827652549/CanvasStudy

介紹

已知數組 [{ x, y, radius }, …], 在canvas中繪製出對應圖形，其中每組x，y代表頂點座標，radius代表設置的圓角值。

通過這種方式，可以實現任意圓角三角形，圓角矩形，甚至是各種奇怪的圓角多邊形等等，滿足你的需求～（噗呲

特別注意：json數組要按照順時針依次錄入，因爲系統沒辦法判斷你的頂點連線順序。

在線演示 詳細代碼

我在demo中加入了預設的一些json，供大家測試

思路

實現這個demo的核心點在於：

• 利用arc或arcTo實現圓角
• 找到圓角起點的解析幾何函數
• 當用戶輸入異常值（redius大於邊長的處理方案）

利用arc或arcTo實現圓角

這個可以翻閱我之前的文章看arc和arcTo的原理，這裏不過多介紹

找到圓角起點的解析幾何函數

通過高中解析幾何，問題可以抽象成“已知A、B、C三點座標，求半徑爲r的內切圓與AC的切點座標”

實現過程：
通過幾何運算找到第一個弧的切點O，循環使用arcTo()進行畫弧，利用筆觸自動相連的特性，直線部分自動相連，最後封閉到指定位置。

當用戶輸入異常值（redius大於邊長的處理方案）

應用Sketch的處理方案，用戶可設定radius值，當出現不合法值的時候，原值不變，圖像自行優化

說明：如100*50的矩形，可以在50像素的邊對應的角，各設置成radius=25，也可以其中一個設爲0，另一個設爲50，總之就是radius1+radius2=50。當radius1+radius2>50的時候，在繪製裏，radius_min不變，radius_max = 50/2，即變成的,而在json數據中不改變這些數據，已保存用戶的數據記錄
在矩形中，這個50很容易看出來，但是在任意三角形中，就要用三角函數算出半徑長度，具體算法不容易用文字呈現，後面考慮使用視頻的形式進行講解。