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

不二如是 · 发表于 2017-6-21 06:17:05

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2017-6-21 22:04 编辑

登录/注册后可看大图

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

不许看答案，否则打屁屁

程序分析：

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

源代码：

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

相关教程推荐：

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

○面试题索引贴●

如果喜欢，请订阅

：

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

向一朵朵鲜花 · 发表于 2018-5-4 10:58:08

看看

tang136 · 发表于 2018-5-18 23:27:08

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

JONERYANG · 发表于 2018-5-22 09:45:28

woxiangchouchou

dsa159245 · 发表于 2018-7-3 00:17:51

                        window.onload = function(){
                                var c = document.getElementById("myCanvas");
                                var a = c.getContext("2d");
                                a.beginPath();
                                a.lineWidth = 20;
                                a.arc(100,100,90,0,Math.PI*2,true);
                                a.stroke();
                                a.closePath();
                                
                                a.strokeStyle = "red";
                                //a.arc(100,100,90,0,Math.PI,true);
                                //a.stroke();
                                var timer = null;
                                var n = 0;
                                timer = setInterval(function(){
                                        n+=0.05;
                                 
                                        a.beginPath();
                                        a.arc(100,100,90,0,n,false);
                                        
                                         
                                        a.stroke();
                                        a.closePath();
                                        
                                        if(n > Math.PI*2){
                                                clearInterval(timer);
                                        }
                                         
                                },50);
                        };

漢\n · 发表于 2018-7-4 08:04:44

膜拜一下

suplai · 发表于 2018-9-10 05:16:27

学习以爱

a211827754 · 发表于 2018-9-25 11:29:51

此计可行，此行必成！

密罗酱 · 发表于 2019-6-2 22:51:35

您的答案

gyemperor · 发表于 2019-6-23 13:17:36

15735513341 · 发表于 2019-10-16 14:53:31

123

红蓝 · 发表于 2019-10-28 21:02:53

康康

qq2695282583 · 发表于 2019-11-2 10:22:03

看看

言16 · 发表于 2020-5-15 20:08:27

woyexiangchouchou

爱笑的皮卡媛 · 发表于 2020-6-29 18:23:04

xuexi

wuyanzulqq · 发表于 2021-1-26 11:44:59

66666

星龙 · 发表于 2021-3-15 09:34:33

看看答案

jack6666 · 发表于 2022-10-26 21:21:52

账号		自动登录	找回密码
密码			立即注册

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

马上注册，结交更多好友，享用更多功能^_^