基于JS的带动画效果的进程进度条

使用流程(如审核流程)时，有三个阶段：开始、审核和成功审核。当处于不同阶段时，进行相应的进度显示，当显示时，则以动画的形式显示。话不多说，我们开始建造吧。

首先我考虑用canvas来创建这个控件，所以现在我在demo.html创建了一个新的canvas来显示测试，首先预测了几个属性值，并在做的过程中进行了添加和更改。最终属性如下：

canvas id=' my canvas ' width=' 800 ' height=' 100 ' style=' background : # efef ' data-show=' start |正在审核|预批准| End ' data-font-size=' 16 ' data-r=' 15 ' DARA-progress=' 3 ' data-speed=' 20 ' data-fill-color=' # ffff 00 ' data-padding=' 10 '您的浏览器不支持HTML5 canvas标记。/canvas然后开始编写相应的js文件，我将其命名为ct_progress.js我的目标是创建一个用户可以自由配置的显示控件，所以我定义了可配置的属性：

var c=document . getelementbyid(' my canvas ')；var show str=c . GetAttribute(' data-show ')；var show strs=show str . 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('数据填充'):10；//左右两侧的interval var space=(c . getattribute(' width ')-2 * r-2 * padding)/(show strs . length-1)；var speed=c . hasattribute(' data-speed ')？Number(c.getAttribute('数据速度')):20；//动画速度变化填充颜色=c . has attribute(' data-fill-color ')？c . GetAttribute(' data-fill-color '): ' # ffff 00 '；//填充颜色var font size=c . has attribute(' data-font-size ')？number(c . GetAttribute(' data-font-size ')):15；属性完成，画布用于开始使用这些属性值进行初始绘制：

for(show strs中的var I){ CTX . BeginPath()；ctx.fillStyle=' # ffffffCTX . arc(r I *空格填充，r填充，r，0，2*Math。PI)；//前两个参数是中心坐标，第三个是半径，第四个是起始角度。第五个是结束角度CTX . fill()；如果(我！=0){ CTX . FillRect(r(I-1)*空格填充，r/2填充，空格，r)；//左上角前两个坐标，后两个的宽度和高度} CTX . BeginPath()；ctx.fillStyle=' # 333333ctx.font=fontSize ' px Georgia//一定要指定字体，否则大小不是CTX。filltext (showstrs [I]，r i * space-r padding，r * 2 font size 10 padding)；//左下角是起点CTX . stroke()；}此时，会绘制一个没有进度的静态流程进度条。然后在进度条显示时向其添加动画：

var ProW=0；//进度长度var progress=c . has attribute(' Dara-progress ')？number(c . GetAttribute(' Dara-progress ')): show strs . length；//var showW=space * progress；//计算应该显示的进度长度，var i=0，j；varint=set interval(function(){//clear//CTX . clear rect(0，0，c.width，c . height)；//不清楚，在原图上画覆盖j=I；I=ParSeint(ProW/space)；if(ij){ CTX . BeginPath()；ctx.fillStyle=fillColourCTX . FillRect(r j *空格填充，r/2填充，空格，r)；//左上角前两个的坐标，后两个的宽度和高度//cleararc (CTX，r j *空格填充，r padding，r，1)；//清除圆圈}否则{如果(我进步){CTX。begin path()；ctx.fillStyle=fillColourCTX . FillRect(r I *空格填充，r/2填充，ProW-I *空格，r)；//左上角前两个坐标，后两个的宽度和高度}//cleararc (CTX，r I *空格填充，r padding，r，1)；//清除圆圈CTX . BeginPath()；ctx.fillStyle=fillColourCTX . arc(r I *空格填充，r填充，r，0，2*Math。PI)；//前两个参数是中心坐标，第三个是半径，第四个是起始角度。第五个是结束角度CTX . fill()；if(ProW=ShowW){ ClearInterval(int)；} proW=速度；}, 150);这样，一个带有显示动画的简单过程进度条就完成了。最终效果如下：

具体控件用法和源代码请参考github:点击开放链接学习或使用童鞋之星。谢谢你

摘要

以上是基于边肖介绍的JS实现动画效果的过程进度条。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！