<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.vevb.com canvas实现加载条动画</title> </head> <body> <canvas id="loadingProgressCanvas"></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> 
