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

这篇文章主要介绍了如何利用JavaScript canvas绘制一个可以动的环形进度条。文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试

介绍

今天分享一个环形进度条的写法，当然这只是一个可动的静态进度条，如果你喜欢可以加入后台数据。这种进度条非常简单的写法到处都有，只不过更多的只是写个样子，咱们这个可以动哟。

前提是canvas的属性、方法和一些基础的js API你都知道，当然为了保证一些忘记的小伙伴一下想起来，我会在前面列个表。

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

回顾完上表开始绘制图形，图形的绘制除了canvas元素之外还有以下几个部分，我先分开把代码按部分写出：

1.创建canvas元素

先创建一个canvas的标签给出宽高，绘制环形进度宽高一致就可以，之后获取元素，并创建画布。注意canvas元素这里起名mycanvas，绘制的画布对象叫ctx。

 //以下为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()