<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> canvas实现加载条动画</title> </head> <body> <canvas></canvas> <script> /* * 获取canvas, canvas本身没有画图能力，相当于一个画布，提供绘制图形的地方 * document.getElementsByTagName("canvas")[0] * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas") * document.querySelectorAll("canvas")[0] */ var loadingProgressCanvas = document.getElementById("loadingProgressCanvas"); var ctx = loadingProgressCanvas.getContext("2d"); // 获取绘制图形的对象(画笔) drawFirst(); // 绘制初始状态 var progress = 0; // 定义进度 drawProgress(); // 绘制初始进度 // 定义定时器, 100ms钟绘制5% var timer = setInterval("drawProgress()", 100); // 绘制初始状态 function drawFirst() { ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条 /* * 定义矩形(左上角x/y左边,宽高) */ ctx.rect(0, 0, 200, 30); ctx.stroke(); // 绘制定义好的矩形路径 ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条 } // 绘制进度条 function drawProgress() { if(progress == 200) { progress = 0; ctx.clearRect(0, 0, 200, 30); // 清楚之前的绘制 } else { ctx.moveTo(progress, 0); // 移动到上一次绘制的终点,准备绘制下一次的进度 ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05 progress += 10; } } </script> </body> </html>
运行结果：
感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：测试一下运行效果。
更多关于JavaScript相关内容还可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》