canvas的简单圆形进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
window.onload = function(){
           function arc(canvas,number){
               var canvas = document.getElementById(canvas),  //获取canvas元素
               context = canvas.getContext('2d'),  //获取画图环境,指明为2d
               centerX = canvas.width/2,   //Canvas中心点x轴坐标
               centerY = canvas.height/2,  //Canvas中心点y轴坐标
               rad = Math.PI*2/100, //将360度分成100份,那么每一份就是rad度
               speed = 0.1; //加载的快慢就靠它了
           //绘制蓝色外圈
               function blueCircle(n){
                   whiteCircle();
                   context.save();
                   context.strokeStyle = "#44C7F4"; //设置描边样式
                   context.lineWidth = 10; //设置线宽
                   context.beginPath(); //路径开始
                   context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
                   context.stroke(); //绘制
                   context.closePath(); //路径结束
                   context.restore();
               }
               //绘制白色外圈
               function whiteCircle(){
                   context.save();
                   context.beginPath();
                   context.strokeStyle = "white";
                   context.lineWidth = 10; //设置线宽
                   context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
                   context.stroke();
                   context.closePath();
                   context.restore();
               
               //百分比文字绘制
               function text(n){
                   context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                   context.fillStyle="#44C7F4";
                   context.font = "40px Arial"; //设置字体大小和字体
                   //绘制字体,并且指定位置
                   context.fillText(n.toFixed(0)+"%", centerX-25, centerY+15);
                   context.stroke(); //执行绘制
                   context.restore();
               }
               //动画循环
                
               function drawFrame(){
                   window.requestAnimationFrame(drawFrame, canvas);
                   context.clearRect(0, 0, canvas.width, canvas.height);
                   whiteCircle();
                   text(speed);
                   blueCircle(speed);
                   if(parseInt(speed) == number) return;
                   speed += 1;
               }
               drawFrame()
           }
        arc("canvas",50);  
       }

  

posted @   kimingw  阅读(690)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示