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繪製環形進度條