Canvas 使用小心得（环形带小点进度条）-CSDN博客

先来个预览

直接贴代码吧。。

HTML

关于canvas的宽高问题，参见链接

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Canvas 环形带小点进度条</title>
</head>
<body ontouchstart="">
    <!-- 宽高必须通过下面的属性来设置，而不是通过style里面设置。否则，获取到的canvas宽高为canvas的默认宽高（300 * 150）-->
    <canvas id="canvas" width="225" height="225"></canvas>
</body>
</html>
复制代码

   function drawMain(drawing_elem, forecolor, bgcolor) {
            /*
                @drawing_elem: 绘制对象
                @forecolor: 绘制圆环的前景色，颜色代码
                @bgcolor: 绘制圆环的背景色，颜色代码
            */
            var offsetXY = 5;//除圆环外，所预留的空白区域
            var context = drawing_elem.getContext("2d");
            var center_x = (drawing_elem.width - offsetXY) / 2;
            var center_y = (drawing_elem.height - offsetXY) / 2;
            var rad = Math.PI * 2 / 100;
            var speed = 0;

            context.lineWidth = offsetXY * 2; //设置线宽

            // 绘制背景圆圈
            function backgroundCircle() {
                context.save();
                context.beginPath();
                var radius = center_x - context.lineWidth;
                context.lineCap = "round";
                context.strokeStyle = bgcolor;
                context.arc(center_x, center_y, radius, 0, Math.PI * 2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }

            //绘制运动圆环
            function foregroundCircle(n) {
                context.save();
                context.strokeStyle = forecolor;
                // context.lineCap = "round"; // 使得圆环边缘有弧度
                var radius = center_x - context.lineWidth;
                context.beginPath();
                context.arc(center_x, center_y, radius, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                context.stroke();
                context.closePath();
                context.restore();
            }

            // 画圆圈上的运动小点
            var ball = {
                x: 0,
                y: -center_y + context.lineWidth,
                radius: 6,
                color: '#f08d49',
                draw: function (n) {
                    context.save();
                    context.translate(center_x, center_y);
                    context.beginPath();
                    context.fillStyle = "#f09d48";

                    var mm = n * (360 / 100) * Math.PI / 180;// 100 为百分之最大值
                    context.rotate(mm);
                    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
                    context.fill();

                    context.closePath();
                    context.restore();
                }
            };

            this.circlePoint = function (n) {
                ball.draw(n);
            }

            //绘制文字
            function text(n) {
                n += "%";
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.fillStyle = forecolor;
                var font_size = 40;
                context.font = font_size + "px Helvetica";
                var text_width = context.measureText(n).width;
                context.fillText(n, center_x - text_width / 2, center_y + font_size / 2);
                context.restore();
            }

            this.animate = function (percent) {
                var interval = setInterval(function () {
                    context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
                    backgroundCircle();
                    text(percent);

                    foregroundCircle(speed);
                    circlePoint(speed);

                    if (speed >= percent) {
                        clearInterval(interval);
                        return;
                    };
                    speed += 1;

                }, 10);

                //(function drawFrame() {
                //    window.requestAnimationFrame(drawFrame);
                //    context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
                //    backgroundCircle();
                //    text(percent);
                //    foregroundCircle(percent);
                //    circlePoint(percent);

                //    if (speed >= percent) return;
                //    speed += 1;
                //}());

                //requestAnimationFrame(function () {
                //    context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
                //    backgroundCircle();
                //    text(percent);

                //    foregroundCircle(percent);
                //    circlePoint(percent);

                //    //if (speed < percent) {
                //    //    animate(percent);
                //    //    speed += 0.1;
                //    //} else {
                //    //    speed = 0;
                //    //}

                //    if (speed >= percent) return;
                //    speed += 1;
                //});
            }

            return this;
        }
复制代码