1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta http-equiv="content-type" content="text/html" charset="utf-8">
5 <meta name="author" content="xuyunfei">
6 <meta name="description" content="">
7 <meta name="keywords" content="test,html">
8 <title>环形进度条</title>
9 </head>
10 <body>
11 </br></br></br></br>
12
13 <div style="width:300px; height:300px; margin:20px auto">
14 <canvas id="canvas" width="300" height="300">
15 <p>抱歉，您的浏览器不支持canvas</p>
16 </canvas>
17 </div>
18
19 <script type="text/javascript">
20 function toCanvas(id ,progress){
21 // canvas进度条
22 var canvas = document.getElementById(id),
23 ctx = canvas.getContext("2d"),
24 percent = progress, //最终百分比
25 circleX = canvas.width / 2, //中心x坐标
26 circleY = canvas.height / 2, //中心y坐标
27 radius = 100, //圆环半径
28 lineWidth = 5, //圆形线条的宽度
29 fontSize = 20; //字体大小
30 //两端圆点
31 // function smallcircle1(cx, cy, r) {
32 // ctx.beginPath();
33 // //ctx.moveTo(cx + r, cy);
34 // ctx.lineWidth = 1;
35 // ctx.fillStyle = '#06a8f3';
36 // ctx.arc(cx, cy, r,0,Math.PI*2);
37 // ctx.fill();
38 // }
39 // function smallcircle2(cx, cy, r) {
40 // ctx.beginPath();
41 // //ctx.moveTo(cx + r, cy);
42 // ctx.lineWidth = 1;
43 // ctx.fillStyle = '#00f8bb';
44 // ctx.arc(cx, cy, r,0,Math.PI*2);
45 // ctx.fill();
46 // }
47
48 //画圆
49 function circle(cx, cy, r) {
50 ctx.beginPath();
51 //ctx.moveTo(cx + r, cy);
52 ctx.lineWidth = lineWidth;
53 ctx.strokeStyle = '#eee';
54 ctx.arc(cx, cy, r, 0, (Math.PI*2),true);
55 ctx.stroke();
56 }
57
58 //画弧线
59 function sector(cx, cy, r, startAngle, endAngle, anti) {
60 ctx.beginPath();
61 //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
62 ctx.lineWidth = lineWidth;
63
64 // 渐变色 - 可自定义
65 // var linGrad = ctx.createLinearGradient(
66 // circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
67 // );
68 // linGrad.addColorStop(0.0, '#06a8f3');
69 //linGrad.addColorStop(0.5, '#9bc4eb');
70 // linGrad.addColorStop(1.0, '#00f8bb');
71 // ctx.strokeStyle = linGrad;
72 ctx.strokeStyle = 'red';
73
74 //圆弧两端的样式
75 ctx.lineCap = 'round';
76
77 //圆弧
78 // ctx.arc(
79 // cx, cy, r,
80 // -1.5,
81 // -1.5 + endAngle/100 * (Math.PI*5/3),
82 // false
83 // );
84 ctx.arc(
85 cx, cy, r,
86 (Math.PI*-1/2),
87 (Math.PI*-1/2) + endAngle/100 * (Math.PI*2),
88 false
89 );
90 ctx.stroke();
91 }
92
93 //刷新
94 function loading() {
95 if (process >= percent) {
96 // clearInterval(circleLoading);
97 process = 0.0;
98 }
99
100 //清除canvas内容
101 ctx.clearRect(0, 0, circleX * 2, circleY * 2);
102
103 //中间的字
104 ctx.font = fontSize + 'px April';
105 ctx.textAlign = 'center';
106 ctx.textBaseline = 'middle';
107 ctx.fillStyle = '#999';
108 ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY);
109
110 //圆形
111 circle(circleX, circleY, radius);
112
113 //圆弧
114 sector(circleX, circleY, radius, (Math.PI*-1/2), process);
115 //两端圆点
116 // smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);
117 // smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);
118 //控制结束时动画的速度
119 // if (process / percent > 0.90) {
120 // process += 0.30;
121 // } else if (process / percent > 0.80) {
122 // process += 0.55;
123 // } else if (process / percent > 0.70) {
124 // process += 0.75;
125 // } else {
126 process += 1.0;
127 // }
128 }
129
130 var process = 0.0; //进度
131 var circleLoading = window.setInterval(function () {
132 loading();
133 }, 1000);
134
135 }
136
137 //第二部分，调用封装好的代码：
138 toCanvas('canvas',100);
139
140 </script>
141 </body>
142 </html>
浙公网安备 33010602011771号