somnustd / html5-progress

draw animated circular progress bar

html5-progress

draw animated circular progress bar

html5 canvas 实现渐变进度条

参数

参数名	参数说明	举例
colorArr	颜色值必须是两个，可以为相同颜色，也可以是渐变的两个色值	["#ffe000","#ff4f00"]
colorBg	半圆背景色 默认#ffffff	'transparent'
linewidth	最外容器的宽度	30
r	进度条的半径	120
startPoint	开始角度，开始角度不同，半圆的大小不同，默认为 Math.PI*0.7	Math.PI*0.8
targetPersent	进度（0-1）	0.9
point	进度条末端的点	</td>

提供的方法

######动画开始 #####execAnimation()

代码实例

var instance = new percentCircle("myCanvas",{
    colorArr:["#ffe000","#ff4f00"],  //颜色值必须是两个，可以为相同颜色，也可以是渐变的两个色值
    colorBg:'transparent', //半圆背景色 默认#ffffff
    linewidth:30,   //半圆的宽度
    r:120,
    startPoint:Math.PI*0.8, //开始角度，开始角度不同，半圆的大小不同，默认为  Math.PI*0.7;
    targetPersent:1,  //进度（0-1）
    point:{             //进度条末端的点
        show:true,       //是否显示
        color:'#ffffff'     //颜色
    }
});
instance.execAnimation();  //动画开始