<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>