本文通过一个实例说明js HTML5画布实现了简单的加载栏(进度条)功能。分享给大家参考，如下：

！doctype html lang=' zh-cn ' head meta charset=' utf-8 ' titlewww.jb51.net canvas实现加载条动画/title/head body canvas id=' loading progress Canvas '/Canvas script/* *获取Canvas，没有绘制能力，相当于一个Canvas。提供一个绘制图形的地方* document . getelementsbytagname(' canvas ')[0]* document . queryselector(' canvas ')/document . queryselector(' loading progress canvas ')* document . queryselector all(' canvas ')[0]*/var loading progress canvas=document . getelementbyid(' loading progress canvas ')；var CTX=loading progress canvas . getcontext(' 2d ')；//获取绘图对象(画笔)draw first()；//绘制初始状态var progress=0；//定义进度draw progress()；//绘制初始进度//定义计时器，以100ms绘制5% var timer=set interval(' draw progress()'，100)；//绘制初始状态函数draw first(){ CTX . fill style=' # 0000 ff '；//定义画笔颜色，重绘加载的进度条/* *定义矩形(左上角x/y左，宽高)*/ctx.rect(0，0，200，30)；CTX . stroke()；//绘制定义的矩形路径ctx.fillStyle=' # 0000ff//定义画笔颜色，重绘加载的进度条}//绘制进度条函数Draw progress(){ if(progress==200){ progress=0；ctx.clearRect(0，0，200，30)；//清除上一个绘图} else {ctx.moveTo(进度，0)；//移动到上一次绘制的终点，准备绘制下一个进度ctx.fillRect(进度，0，10，30)；//200 * 0.05进度=10；} }/脚本/正文/html运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试运行效果。

关于JavaScript的更多信息，请查看本网站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010

希望本文对JavaScript编程有所帮助。