本文實例講述了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程序設計有所幫助。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。