【绘制】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很容易看出来，但是在任意三角形中，就要用三角函数算出半径长度，具体算法不容易用文字呈现，后面考虑使用视频的形式进行讲解。