本文實例講述了js+HTML5 canvas 實現簡單的加載條(進度條)功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.49028c.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>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
