本文實(shí)例講述了js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能。分享給大家供大家參考，具體如下：

www.jb51.net canvas實(shí)現(xiàn)加載條動(dòng)畫(huà)

/*

* 獲取canvas, canvas本身沒(méi)有畫(huà)圖能力，相當(dāng)于一個(gè)畫(huà)布，提供繪制圖形的地方

* document.getElementsByTagName("canvas")[0]

* document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas")

* document.querySelectorAll("canvas")[0]

*/

var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");

var ctx = loadingProgressCanvas.getContext("2d"); // 獲取繪制圖形的對(duì)象(畫(huà)筆)

drawFirst(); // 繪制初始狀態(tài)

var progress = 0; // 定義進(jìn)度

drawProgress(); // 繪制初始進(jìn)度

// 定義定時(shí)器, 100ms鐘繪制5%

var timer = setInterval("drawProgress()", 100);

// 繪制初始狀態(tài)

function drawFirst() {

ctx.fillStyle="#0000ff"; // 定義畫(huà)筆顏色, 重新繪制已經(jīng)加載的進(jìn)度條

/*

* 定義矩形(左上角x/y左邊,寬高)

*/

ctx.rect(0, 0, 200, 30);

ctx.stroke(); // 繪制定義好的矩形路徑

ctx.fillStyle="#0000ff"; // 定義畫(huà)筆顏色, 重新繪制已經(jīng)加載的進(jìn)度條

}

// 繪制進(jìn)度條

function drawProgress() {

if(progress == 200) {

progress = 0;

ctx.clearRect(0, 0, 200, 30); // 清楚之前的繪制

} else {

ctx.moveTo(progress, 0); // 移動(dòng)到上一次繪制的終點(diǎn),準(zhǔn)備繪制下一次的進(jìn)度

ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05

progress += 10;

}

}

運(yùn)行結(jié)果：

感興趣的朋友可使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試一下運(yùn)行效果。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。