canvas实现圆环加载效果

整个效果分为三个部分：中间的百分比、环形进度条、细线圆环。

获取上下文环境：

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var conterX = canvas.width / 2;
            var conterY = canvas.height / 2;
            var rad = Math.PI * 2 / 100;
            var speed = 0.1;

百分比：

            function text(n) {
                context.save();
                context.strokeStyle = "#49f";
                context.font = "20px Arial";
                context.strokeText(n.toFixed(0) + "%", conterX - 25, conterY + 10);
                context.stroke();
                context.restore();
            }

环形进度条

            function blueCricle(n) {
                context.save();
                context.beginPath();
                context.strokeStyle = "#49f";
                context.lineWidth = 8;
                context.arc(conterX, conterY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
                context.stroke();
                context.closePath();
                context.restore()
            }

细线圆环

            function widthCricle() {
                context.save();
                context.beginPath();
                context.strokeStyle = "red";
                context.lineWidth = 4;
                context.arc(conterX, conterY, 100, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }

进度效果：

            (function draw() {
                window.requestAnimationFrame(draw, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

                widthCricle();
                text(speed);
                blueCricle(speed);

                if (speed > 100) {
                    speed = 0;
                }
                speed += 0.1;
            }())

整体代码：