html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例

本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能。分享给大家供大家参考，具体如下：

www.jb51.net canvas实现加载条动画

/*

* 获取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;

}

}

运行结果：

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

希望本文所述对大家JavaScript程序设计有所帮助。