本文介绍如何使用HTML5 Canvas和JavaScript开发一个可配置的带动画效果流程进度条。通过定义圆点、连线及填充色等属性，利用setInterval实现进度条的动态延伸动画，适用于审核等多阶段流程展示。
Canvas流程进度条实现思路
在处理流程展示时，例如包含开始、审核中、审核成功等阶段的审核流程，通常需要动态显示当前进度。为了提升用户体验，进度条的展示最好以动画形式呈现。接下来我们将具体实现这一功能。
初始化配置与静态绘制
首先，我决定采用Canvas元素来构建该控件。在demo.html中创建了一个用于测试的Canvas元素，并预设了部分属性。在开发过程中对属性进行了调整，最终确定的属性配置如下：
<canvas id="myCanvas" width="800" height="100" style="background:#efefef" data-show="开始|审核中|预审核|结束" data-font-size="16"
data-r="15" dara-progress="3" data-speed="20" data-fill-colour="#ffff00" data-padding="10">
您的浏览器不支持 HTML5 canvas 标签。</canvas> 随后开始编写对应的JavaScript文件，文件命名为ct_progress.js。为了实现用户可自由配置的显示控件，我定义了以下可配置属性：
var c=document.getElementById("myCanvas");
var showStr = c.getAttribute("data-show");
var showStrs = showStr.split("|");
var r = c.hasAttribute("data-r")?Number(c.getAttribute("data-r")):15;
var ctx=c.getContext("2d");
var padding = c.hasAttribute("data-padding")?Number(c.getAttribute("data-padding")):10;//左右上的间隔
var space = (c.getAttribute("width")-2*r-2*padding)/(showStrs.length-1);
var speed = c.hasAttribute("data-speed")?Number(c.getAttribute("data-speed")):20;//动画速度
var fillColour = c.hasAttribute("data-fill-colour")?c.getAttribute("data-fill-colour"):"#ffff00";//填充色
var fontSize = c.hasAttribute("data-font-size")?Number(c.getAttribute("data-font-size")):15; 属性定义完成后，利用Canvas根据这些属性值进行初始化绘图：
for(var i in showStrs)
{
ctx.beginPath();
ctx.fillStyle="#ffffff";
ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面两个参数为圆心坐标，第三个为半径，第四个为起始角。第五个为结束角
ctx.fill();
if(i!=0)
{
ctx.fillRect(r+(i-1)*space+padding,r/2+padding,space,r);//前面两个左上角坐标，后面两个宽高
}
ctx.beginPath();
ctx.fillStyle="#333333";
ctx.font=fontSize+"px Georgia";//一定要指定字体否则大小没有用
ctx.fillText(showStrs[i],r+i*space-r+padding,r*2+fontSize+10+padding);//左下角为起点
ctx.stroke();
} 添加动态动画效果
此时绘制出了一个静态的、无进度变化的流程进度条。接下来，为该进度条添加显示时的动画效果：
var proW = 0;//进度长度
var progress = c.hasAttribute("dara-progress")?Number(c.getAttribute("dara-progress")):showStrs.length;//
var showW = space*progress;//计算应该显示的进度长度
var i=0,j;
var int = setInterval(function () {
//清除
//ctx.clearRect(0, 0, c.width, c.height);//不清除在原图上画了覆盖
j=i;
i = parseInt(proW/space);
if(i>j)
{
ctx.beginPath();
ctx.fillStyle=fillColour;
ctx.fillRect(r+j*space+padding,r/2+padding,space,r);//前面两个左上角坐标，后面两个宽高
//clearArc(ctx,r+j*space+padding,r+padding,r,1);//清除圆部
}
else
{
if(i<progress)
{
ctx.beginPath();
ctx.fillStyle=fillColour;
ctx.fillRect(r+i*space+padding,r/2+padding,proW-i*space,r);//前面两个左上角坐标，后面两个宽高
}
}
//clearArc(ctx,r+i*space+padding,r+padding,r,1);//清除圆部
ctx.beginPath();
ctx.fillStyle=fillColour;
ctx.arc(r+i*space+padding,r+padding,r,0,2*Math.PI);//前面两个参数为圆心坐标，第三个为半径，第四个为起始角。第五个为结束角
ctx.fill();
if(proW>=showW)
{
clearInterval(int);
}
proW+=speed;
}, 150); 至此，一个简单的带有显示动画的流程进度条便开发完成。最终效果如下：
具体控件的使用方法及完整源码，详见github:点击打开链接。希望学习或有用到的童鞋star一下，感谢
总结
以上所述是小编给大家介绍的基于JS实现带动画效果的流程进度条，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！