Vue中基于Canvas实现动态圆环进度条

Canvas绘制动态圆环进度条概述

本文分享使用JavaScript Canvas绘制动态圆环进度条的具体实现代码，供读者参考。

由于项目基于Vue框架开发，此处主要展示核心的绘制函数逻辑，上图展示了最终的视觉效果。

drawMain(drawing_elem, percent, forecolor, bgcolor) {
            /*
                @drawing_elem: 绘制对象
                @percent：绘制圆环百分比, 范围[0, 100]
                @forecolor: 绘制圆环的前景色，颜色代码
                @bgcolor: 绘制圆环的背景色，颜色代码
            */
            var context = drawing_elem.getContext("2d");
            var center_x = drawing_elem.width / 2;
            var center_y = drawing_elem.height / 2;
            var rad = Math.PI*2/100; 
            var speed = 0;
            
            // 绘制背景圆圈
            function backgroundCircle(){
                context.save();
                context.beginPath();
                context.lineWidth = 8; //设置线宽
                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.lineWidth = 8;
                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();
            }
 
            //绘制文字
            function text(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.toFixed(0)+"%").width;
                context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
                context.restore();
            }
 
            //执行动画
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame);
                context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
                backgroundCircle();
                text(speed);
                foregroundCircle(speed);
                if(speed >= percent) return;
                speed += 1;
            }());
        },

具体的调用方式如下所示：

var time_canvas = document.getElementById("time-graph-canvas");
 this.drawMain(time_canvas, 70, "#85d824", "#eef7e4");

var weather_canvas = document.getElementById("weather-graph-canvas");
        this.drawMain(weather_canvas, 90, "#2ba0fb", "#e5f1fa");

HTML结构代码如下：

<div class="time-graph">
   <canvas id="time-graph-canvas" width="160" height="160"></canvas>
</div>

配套的CSS样式代码如下：

.time-graph {
    padding-top: 20px;
    display:flex;
    display:-webkit-flex;
    justify-content: center;
    align-items: center;
}
 
#time-graph-canvas {
    width: 80px;
    height: 80px;
}

Canvas清晰度优化建议

在绘制细节上需注意一点：为了确保图形渲染的清晰度，Canvas的实际尺寸应设置为父容器大小的2倍。

其余代码部分均包含详细注释，开发者可直接复制代码并运行查看效果。

以上就是本文的全部内容，希望能为各位的学习提供有益帮助，同时也欢迎大家继续支持本站。