canvas环形进度条

<style>
　　canvas {
　　　　border: 1px solid red;
　　　　margin: 100px;
　　}
</style>

<canvas id="ring-process-bar" width="100" height="100">
　　您的浏览器不支持html5 canvas标签。
</canvas>

<script>
　　var ring = document.getElementById('ring-process-bar');
　　var rtx = ring.getContext('2d');
　　rtx.beginPath(); //起始一条路径
　　rtx.lineWidth = 20; //设置当前线条的宽度
　　rtx.strokeStyle = '#ccc'; //设置笔触的颜色
　　rtx.lineCap = 'round'; //结束线帽：butt默认平直／round圆形／square正方形
　　rtx.arc(50, 50, 40, 0, 2 * Math.PI, true); //arc(x,y,r,start,stop,false) 创建弧/曲线／圆；圆中心点的x，y坐标；r半径；start起始角，三点钟位置为0度；false顺时针，默认
　　rtx.stroke();
</script>

<canvas id="ring-canvas" width="500" height="200">
　　您的浏览器不支持html5 canvas标签。
</canvas>

<script>
　　function Circle() {
　　　　this.centerX = 100; 
　　　　this.centerY = 100;
　　　　this.radius = 90; 
　　　　this.lineWidth = 20;
　　　　this.strokeStyle = '#ccc'; 
　　　　this.fillStyle = 'blue'; 
　　　　this.lineCap = 'round'; 
　　}

　　Circle.prototype.draw = function(ctx) {
　　　　ctx.beginPath();
　　　　ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, false);
　　　　ctx.lineWidth = this.lineWidth;
　　　　ctx.strokeStyle = this.strokeStyle;
　　　　ctx.stroke();
　　};

　　function Ring(startAngle, percent) {
　　　　Circle.call(this);
　　　　this.startAngle = startAngle || Math.PI / 2 * 3; //弧起始角度
　　　　this.percent = percent; //弧占的比例
　　}

　　Ring.prototype = Object.create(Circle.prototype);

　　　　Ring.prototype.drawRing = function(ctx) {
　　　　　　var  count = 0,
　　　　　　　　start = this.startAngle,
　　　　　　　　stop = start + Math.PI * 2 * this.percent / 100;

　　　　　　this.draw(ctx);

　　　　　　ctx.beginPath();
　　　　　　ctx.arc(this.centerX, this.centerY, this.radius, start, stop, false); //这里的圆心坐标要和cirle的保持一致
　　　　　　ctx.strokeStyle = this.fillStyle;
　　　　　　ctx.lineCap = this.lineCap;
　　　　　　ctx.stroke();
　　　　　　ctx.closePath();
　　}

　　var ring = document.getElementById('ring-canvas');
　　var rtx = ring.getContext('2d');
　　var r = new Ring(0, 80);
　　r.drawRing(rtx)
</script>

HTML5 Canvas菜鸟教程

HTML5 Canvas绘制环形进度条