js+HTML5 canvas 实现简单的加载条(进度条)功能示例
人气:0本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.qb5200.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>
运行结果:
感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.softyun.net/code/HtmlJsRun测试一下运行效果。
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
加载全部内容