使用canvas画布画动态圆环_canvas 花个圈

一、看之前建议先了解基本的canvas使用方法。
canvas教程
只需要花几分钟了解下就好，有助于更快学会。当然不了解也能看，我注释写的非常清晰，大可放心。
下面是效果图：
圆圈是根据设定的时间来画完的。



二、html部分

 <div class="wrapper">
        <!-- canvas的宽高最好用width和height写在内联样式里（规范写法） -->
        <canvas id="drawCircle" width="400px" height="400px">111111</canvas>
  </div>
1
2
3
4

三、css部分

 .wrapper {
                margin: 10px auto;
                width: 400px;
                height: 400px;
                border: 1px solid pink;
            }
1
2
3
4
5
6

四、js部分

 //数据对象，个人喜欢把数据放在一起
        var data = {
            paintIntv: null, //初始化画圆的定时器
            time: 8, //设置动画持续时间为8s
            percent: 0,
            refreshTime: 200, //刷新时间间隔
        };
        data.paintIntv = setInterval(dealTime, data.refreshTime); //开启定时器，200ms刷新一次
        /*
         *这个函数用来处理百分比和时间的关系
         *percent:每次应该加的百分比（由时间的长短决定）
         *time 决定了整个动画过程的持续时间
         */
        function dealTime() {
            paint(data.percent); //根据百分比画圆
            if (data.percent >= 1) {
                clearInterval(data.paintIntv); //画完后清除定时器
            } else {
                //percent 最大为1,用1.0c成乘以refreshTime是转化为浮点数
                //除以总时间表示，一毫秒走多少，再乘以刷新时间就是刷新一次应该走的距离
                data.percent += (data.refreshTime * 1.0) / (data.time * 1000);
            }
        }
        /*
         *把画圆环的方法封装成函数
         *methodName : paint
         *percent : 画圆环的百分比
         */
        function paint(percent) {
            var draw = document.getElementById("drawCircle"); //拿到画布dom
            /*
             *检测浏览器是否支持canvas
             * else里面放浏览器支持的显示用于提示
             */
            if (draw.getContext) {
                var ctx = draw.getContext("2d"); //创建画布对象
                ctx.beginPath(); //表示按照指定的路径开始绘制图形
                /*
                 *parameter1:圆心x坐标，必须
                 *parameter2:圆心y坐标，必须
                 *parameter3:画圆的起始点0（3点钟方向)，必须
                 *parameter4:画圆的结束点（按照百分比来），必须
                 *parameter5:是否逆时针画（可省略，默认顺时针）
                 */
                ctx.arc(200, 200, 50, 0, 2 * Math.PI * percent, false);
                ctx.lineWidth = 5; //线条宽度
                ctx.strokeStyle = "skyblue"; //线条颜色
                ctx.stroke(); //画线条
                ctx.closePath(); //表示路径结束，这个图形绘制完毕，之后可以在这个画布中画别的图形
            } else {
                alert("你的浏览器不支持canvas"); //其实绝大部分浏览器都支持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