前言
之前一篇文章,写过关于canvas绘制百分比的环形图,以及进度条模糊的解决方案,今天项目中用到了圆角环形图,查了一下百度echart,发现并没有圆角环形图,highchart的圆角环形图和项目中的有些出入,highchart的展示地址请看:/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&#x