canvas动态画圆和数字滚动进度条

canvas动态画圆

效果演示：

canvas动态画圆和数字滚动进度条

使用插件：circleChart.min.js

HTML代码：

<div class="circle">
	<div class="circleChart mun_top" id="1" data-value="77"></div>
</div>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		var cirsize=$(".circleChart").width();//动态获取circleChart宽高
		$(".circleChart#1").circleChart({
		    size: cirsize,//可以直接写固定宽高(300)等
			value: 100,//结束位置
			speed:3000,//进度时间
			color: "#0f426d",//线条颜色
			widthRatio: 0.02,//线条粗细
			backgroundColor: "#dbe3e9",//线条背景色
			animation: "easeInOutCubic",//电话效果
			text:0,
			onDraw: function(el, circle) {
			    circle.text(Math.round(circle.value) + "%");
			}
		});
		
		
	})
</script>
           

css样式：

/* canvas动态画圆 */
.circle{width: 50vh;height: 50vh;border-radius: 50%;box-sizing: border-box;border: 10px solid #F0F8FF;margin: 25vh auto;position: relative;}
.circleChart{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.circleChart_text{color: #DC2924;font-weight: bold;}