1

2

3

4

5

test

6

7 body{

8 display:flex;

9 flex-flow:column wrap;

10 justify-content:center;

11 align-items:center;

12 }

13 #c{

14 margin-top:20px;

15 background:#435ae4;

16 }

17

18

19

20 当前浏览器不支持canvas 请升级！

21

22

23 canvas=document.getElementById("canvas");24 ctx=canvas.getContext("2d");25 datas= 100;26 M=Math;27 Sin=M.sin;28 Cos=M.cos;29 Sqrt=M.sqrt;30 Pow=M.pow;31 PI=M.PI;32 Round=M.round;33 oW=canvas.width= 250;34 oH=canvas.height= 250;35 canvas.style.borderRadius= "50%";36 //线宽

37 lineWidth= 1;38 //大半径

39 r=oW/ 2;40 cR=r- 1 *lineWidth;41 ctx.beginPath();42 ctx.lineWidth=lineWidth;43 //水波动画初始参数

44 axisLength= 2 *r- 16 *lineWidth;//Sin 图形长度

45 unit=axisLength/ 9;//波浪宽

46 range= 0.4;//浪幅

47 nowrange=range;48 xoffset= 8 *lineWidth;//x 轴偏移量

49 data=datas/ 100;//数据量

50 sp= 0;//周期偏移量

51 nowdata= 0;52 waveupsp= 0.006;//水波上涨速度

53 //圆动画初始参数

54 arcStack=[];//圆栈

55 bR=r- 20 *lineWidth;56 soffset= -(PI/ 2);//圆动画起始位置

57 circleLock= true;//起始动画锁

58 //获取圆动画轨迹点集

59 for(vari=soffset; i

63 cStartPoint=arcStack.shift();64 ctx.fillStyle= "transparent";65 ctx.moveTo(cStartPoint[0], cStartPoint[1]);66 ctx.fill();67 //开始渲染

68 render();69 functiondrawSine() {70 ctx.beginPath();71 ctx.save();72 varStack=[];//记录起始点和终点坐标

73 for(vari=xoffset; i<=xoffset+axisLength; i+= 20 /axisLength) {74 varx=sp+(xoffset+i)/unit;75 vary=Sin(x)*nowrange;76 vardx=i;77 vardy= 2 *cR*(1 -nowdata)+(r-cR)-unit*y;78 ctx.lineTo(dx, dy);79 Stack.push([dx, dy]);80 }81 //获取初始点和结束点

82 varstartP=Stack[0];83 varendP=Stack[Stack.length- 1];84 ctx.lineTo(xoffset+axisLength, oW);85 ctx.lineTo(xoffset, oW);86 ctx.lineTo(startP[0], startP[1]);87 ctx.fillStyle= "#3B7BF8";88 ctx.fill();89 ctx.restore();90 }91

92 functiondrawText() {93 ctx.globalCompositeOperation= "source-over";94 varsize= 0.4 *cR;95 ctx.font= "bold" +size+ "px Microsoft Yahei";96 txt=(nowdata.toFixed(2)* 100).toFixed(0)+ "%";97 varfonty=r+size/ 2;98 varfontx=r-size* 0.8;99 ctx.fillStyle= "#9E90EF";100 ctx.textAlign= "center";101 ctx.fillText(txt, r+ 5, r+ 20);102 }103 //最外面淡黄色圈

104 functiondrawCircle() {105 ctx.beginPath();106 ctx.lineWidth= 15;107 ctx.strokeStyle= "#3F1EB9";108 ctx.arc(r, r, cR- 6.1,0,2 *Math.PI);109 ctx.stroke();110 ctx.restore();111 }112 //灰色圆圈

113 functiongrayCircle() {114 ctx.beginPath();115 ctx.lineWidth= 1;116 ctx.strokeStyle= "transparent";117 ctx.arc(r, r, cR+ 10,0,2 *Math.PI);118 ctx.stroke();119 ctx.restore();120 ctx.beginPath();121 }122 //橘黄色进度圈

123 functionorangeCircle() {124 ctx.beginPath();125 ctx.strokeStyle= "#B0BAEE";126 //使用这个使圆环两端是圆弧形状

127 ctx.lineCap= "round";128 ctx.arc(129 r,130 r,131 cR- 4,132 0 *(Math.PI/ 180.0)-Math.PI/ 2,133 nowdata* 360 *(Math.PI/ 180.0)-Math.PI/ 2

134 );135 ctx.stroke();136 ctx.save();137 }138 //裁剪中间水圈

139 functionclipCircle() {140 ctx.beginPath();141 ctx.arc(r, r, cR- 10,0,2 *Math.PI,false);142 ctx.clip();143 }144 //渲染canvas

145 functionrender() {146 ctx.clearRect(0,0, oW, oH);147 //最外面淡黄色圈

148 drawCircle();149 //灰色圆圈

150 grayCircle();151 //橘黄色进度圈

152 orangeCircle();153 //裁剪中间水圈

154 clipCircle();155 //控制波幅

156

157 if(data>= 0.85) {158 if(nowrange>range/ 4) {159 vart=range* 0.01;160 nowrange-=t;161 }162 }else if(data<= 0.1) {163 if(nowrange=range) {173 vart=range* 0.01;174 nowrange-=t;175 }176 }177 if(data-nowdata> 0) {178 nowdata+=waveupsp;179 }180 if(data-nowdata< 0) {181 nowdata-=waveupsp;182 }183 sp+= 0.07;184 //开始水波动画

185 drawSine();186 //写字

187 drawText();188 requestAnimationFrame(render);189 }190

191