使用html5 canvas绘制圆环动效

最近笔者有个需求,需求内容为:一组文字显示在圆环的周围,用户可添加文字,文字围绕着圆环,每个词对应圆环周围的的蓝色小圆点,当用户鼠标放在圆环上方小蓝点时时,实现放射出三角形,再显示出文字,先看看动图效果吧! ​ ​​ 如上图所示,当鼠标放在对应蓝色小圆点上时,需要放射出射类似三角形的射线,并在三角形外侧显示对应文字,且小蓝点变小白点。 ​ 当用户在上方输入内容后,将内容添加至下方的圆环周围。如上图所示。 笔者本来一开始的想法是使用css来实现,就像下图的动态二级菜单一样。 ​ ​​ 但是考虑到圆环边缘的内容可变,又要定位到圆环周围,css可能会比较难实现。所以哇,笔者决定使用canvas