html 环形图圆角,canvas绘制圆角环形图

前言

之前一篇文章，写过关于canvas绘制百分比的环形图,以及进度条模糊的解决方案，今天项目中用到了圆角环形图，查了一下百度echart，发现并没有圆角环形图，highchart的圆角环形图和项目中的有些出入，highchart的展示地址请看：https://www.hcharts.cn/demo/highcharts/gauge-activity 因此，用canvas写了一个，在这里分享一下。

示例图片

参数

* @param {type} radius 圆环半径

* @param {type} lineWidth 圆环宽度

* @param {type} strokeStyle 默认背景

* @param {type} fillStyleArray 数组，圆环色块颜色

* @param {type} capType 类型：round是圆角，square正方形顶帽，butt是正常

* @param {type} percentArray ，数字，每个占据的百分比

* @param {type} startAngle 开始的角度

* @param {type} criclex，cricley 圆心坐标，一般是canvas的一半，例如：canvas给的宽度是250