如何用JavaScript canvas实现动态长尾词圆环进度条？

本文共计612个文字，预计阅读时间需要3分钟。

原文：本文字例为大家分享了JavaScript+canvas绘制动态圆形进度条的完整代码，供大家参考。具体内容如下：由于使用的是vue开发，所以展示一下绘制函数好了，上图是效果图+drawMain(drawing_ele)

改写后：以下以Vue框架为基础，展示了使用JavaScript和canvas绘制动态圆形进度条的代码示例，并附上效果图。具体绘制函数如下：+drawMain(drawing_ele)

本文实例为大家分享了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倍。

其他的代码都有详细的注释，自己拷一下，运行一下就知道

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。