JavaScript实现可动的canvas环形进度条

介绍

本文分享一种环形进度条的实现方式。虽然这只是一个静态可动的进度条，但您可以结合后台数据进行扩展。这种进度条的简单写法随处可见，但大多数仅用于展示外观，而本示例重点在于实现动态效果。

在开始之前，假设您已了解Canvas的属性、方法及基础JavaScript API。为方便记忆，前文列出了相关表格供回顾。

属性和方法	描述
getContext()	返回一个用于在画布上绘图的环境
strokeStyle	画笔（绘制图形）颜色或者样式的属性
lineWidth	设置线段厚度的属性
save()	保存canvas全部状态的方法（入栈）
beginPath()	创建一个新的路径的方法
arc(原点x,原点y,半径,起始角度,结束角度,默认false顺时针)	绘制圆弧路径的方法
stroke()	绘制路径的方法
closePath()	闭合绘制路径
restore()	恢复到最近的保存状态的方法（出栈）
fillStyle	颜色和样式的属性
font	当前字体样式的属性
toFixed(num)	把Number四舍五入为指定小数位数的数字

回顾上述表格后，我们将开始绘制图形。除Canvas元素外，绘制环形进度条还需涉及以下几个部分，以下将分模块展示代码：

1.创建Canvas元素

首先创建一个Canvas标签并设置宽高，确保绘制环形进度条时宽高一致。随后获取该元素并创建画布上下文。注意，此处Canvas元素ID命名为mycanvas，绘制的画布对象命名为ctx。

<canvas id="mycanvas" width="200" height="200"></canvas>
//以下为js代码
var mycanvas = document.getElementById('mycanvas');
var ctx = mycanvas.getContext('2d');

2.绘制的准备工作

在正式绘制前，需完成以下准备工作：

确定“画布的中心点”坐标。
将进度条按进度比例分为100份，对应100%的完成度。
指定初始加载步长（长度），注意这是初始化值，后续可修改为0。

//找到画布的中心点
var canvasX = mycanvas.width / 2;
var canvasY = mycanvas.height / 2;
//进度条是100%，所以要把一圈360度分成100份
var progress = Math.PI * 2 / 100;
//指定初始加载步长
var steps = 0.5;

3.绘制环形底层

首先绘制进度的环形底层，即浅灰色的环，作为进度的路径。可以先指定绘制颜色和线宽，这两个属性不影响后续方法的执行顺序。

ctx.strokeStyle = '#dddddd';
ctx.lineWidth = 20;
ctx.save();
ctx.beginPath();
ctx.arc(canvasX, canvasY, 90, 0, Math.PI * 2, false)
ctx.stroke();
ctx.closePath();
ctx.restore();

4.绘制进度层

进度层的颜色需单独定义，且进度条的粗细应与底层环形保持一致。这里最关键的一步是在结束角度中加入“steps * progress”（步长乘以进度）。steps数值越小，乘积后增加的角度越少；steps数值越大，乘积后进度增加越多。

ctx.strokeStyle = "#47cab0";
ctx.lineWidth = 20;
ctx.save();
ctx.beginPath();
ctx.arc(canvasX,canvasY,90, -Math.PI/2, -Math.PI/2+steps*progress,false);
ctx.stroke();
ctx.closePath();
ctx.restore();

5.绘制字体并指定位置

环形进度百分比文字显示需使用Canvas的文字绘制功能。需注意数字从1位到3位跨度较大，且需加入“%”符号，因此绘制位置需动态调整。当数字达到100时，文字占宽更大，需改变绘制起点。

ctx.fillStyle = "#000000"; //可改
ctx.font = "bold 26px Arial"; //可改
ctx.save();
// canvasX-30, canvasY+10  中的加减的数值可改
if (steps.toFixed(0).length == 3) {
   ctx.fillText(steps.toFixed(0) + '%', canvasX - 30, canvasY + 10);
} else {
   ctx.fillText(steps.toFixed(0) + '%', canvasX - 20, canvasY + 10);
}
ctx.restore();

至此，静态进度条已呈现，但我们需要让其动起来。虽然大家可能首先想到定时器，但我们采用另一种编写循环动画的方法。

6.进度动画

显示器刷新频率通常为50~60Hz，1000ms/60≈16.6ms，相当于每秒重绘60次，大多数浏览器不会超过此重绘频率。之前的文章曾提到，setTimeout()和setInterval()这两种循环方式并不精准智能，即使使用setTimeout()以自调方式模拟循环定时器，也不能确保处理线程按理想执行。

window.requestAnimationFrame()

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

因此为了保证平滑渲染，我们使用window.requestAnimationFrame()，在该方法的参数一个回调函数中做几件事：

1.判断完成整个环形步长的结束值，如：100，其实就是走到100%的位置，75就是走到75%的位置

2.在选择的步长范围内调用增长的函数

window.requestAnimationFrame(function () {
//判断步子最终走多远的边界值，此值可以改
  if (steps < 90) {
  //该函数在边界内可以调用函数，增加步长并且绘制图形给这个函数起个名字
  }
})

因为有函数的自调用，所以我们把这部分写在一起，不拆分写了。难度就在此处！

第一步：要先做，把之前所有的绘制图形代码放入新创建的函数DrawShape中，并且需要接收两个参数。一个是要绘制的对象，因为一个页面上不止一个画布对象。第二个参数就是每次会改变的步长。

//绘制形状函数,传入画布对象和每次都会改变的步长
function DrawShape(ctx,steps) {
//画圆
      画底层圆形的代码...
//画进度环
      画进度条的代码...
//绘制字体并指定位置
      绘制字体的代码...
}

第二步：创建animate函数用来执：平滑动画、行步长的增加、绘制图形三件重要事宜。

//初始调用动画函数
animate();
//动画函数
function animate() {
//执行平滑动画
window.requestAnimationFrame(function () {
//判断步子最终走多远的边界值，此值可以改
if (steps < 90) {
//该函数在边界内可以调用
       animate();
    }
 });
//清空绘制内容
 ctx.clearRect(0, 0, mycanvas.width, mycanvas.height);
//每次增加的步长，数值越大步子越大跑的越快，数值越小走的越慢
 steps += 0.5;//可改
//调用绘制形状函数，传入参数绘制对象，环形进度步长
 DrawShape(ctx,steps);
};

以上代码是全部代码只是没有合并整理格式，大家可以自己整理

到此这篇关于JavaScript实现可动的canvas环形进度条的文章就介绍到这了,更多相关JavaScript canvas环形进度条内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！