JavaScript|JavaScript canvas绘制动态圆环进度条 JavaScriptcanvas绘制动态圆环进度

本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码，供大家参考，具体内容如下
【JavaScript|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文件

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倍。
其他的代码都有详细的注释，自己拷一下，运行一下就知道
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。