前端 环形统计_用Canvas+js 实现简单圆形百分比统计图表

示例效果图如下：

1、先来制作简单HTML代码结构：

2、再是CSS样式代码：

body {

margin: 0;

padding: 50px 0;

background-color: #444;

}

ul,li {

list-style: none;

margin: 0;

padding: 0;

}

ul li {

float: left;

width: 33%;

text-align: center;

}

3、具体JS代码实现+注释如下：

function drawCircle(_options){

var options = _options || {}; //获取或定义options对象;

options.angle = options.angle || 1; //定义默认角度1为360度(角度范围 0-1);

options.color = options.color || '#fff'; //定义默认颜色(包括字体和边框颜色);

options.lineWidth = options.lineWidth || 10; //定义默认圆描边的宽度;

options.lineCap &#