技法48 (◐‿◑) 利用Canvas画一个简单的圆形进度条

不二如是

                               
登录/注册后可看大图

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁

---

程序分析：

        利用Canvas画一个简单的圆形进度条，利用arc（圆心x，圆心y，半径，起始角，终止角）方法进行圆和进度变化的设置，最后结合定时器完成进度的变化       

源代码：

游客，如果您要查看本帖隐藏内容请回复

相关教程推荐：

0 0 6 0 - 制作一个加载（Loading）动画 - 0.0

---

○面试题索引贴●

如果喜欢，请订阅 ：

HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

向一朵朵鲜花

看看

tang136

利用Canvas画一个简单的圆形进度条

JONERYANG

woxiangchouchou

dsa159245

1.                         window.onload = function(){
   
2.                                 var c = document.getElementById("myCanvas");
   
3.                                 var a = c.getContext("2d");
   
4.                                 a.beginPath();
   
5.                                 a.lineWidth = 20;
   
6.                                 a.arc(100,100,90,0,Math.PI*2,true);
   
7.                                 a.stroke();
   
8.                                 a.closePath();
   
9.                                
   
10.                                 a.strokeStyle = "red";
    
11.                                 //a.arc(100,100,90,0,Math.PI,true);
    
12.                                 //a.stroke();
    
13.                                 var timer = null;
    
14.                                 var n = 0;
    
15.                                 timer = setInterval(function(){
    
16.                                         n+=0.05;
    
17.                                  
    
18.                                         a.beginPath();
    
19.                                         a.arc(100,100,90,0,n,false);
    
20.                                        
    
21.                                          
    
22.                                         a.stroke();
    
23.                                         a.closePath();
    
24.                                        
    
25.                                         if(n > Math.PI*2){
    
26.                                                 clearInterval(timer);
    
27.                                         }
    
28.                                          
    
29.                                 },50);
    
30.                         };

复制代码

漢\n

膜拜一下

suplai

学习以爱

a211827754

此计可行，此行必成！

密罗酱

您的答案

gyemperor

1

15735513341

123

红蓝

康康

qq2695282583

看看

言16

woyexiangchouchou

爱笑的皮卡媛

xuexi

wuyanzulqq

66666

星龙

看看答案

jack6666

1