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

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

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

http://xxx.fishc.com/forum/201705/05/225545py2j222x5z6x55n2.png

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

不许看答案，否则打屁屁



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

源代码：
**** Hidden Message *****


相关教程推荐：

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



○面试题索引贴●
如果喜欢，请订阅{:10_303:} ：
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

1

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

1
页: [1]
查看完整版本: 技法48 (◐‿◑) 利用Canvas画一个简单的圆形进度条