本文實(shí)例講述了js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能。分享給大家供大家參考，具體如下：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>www.survivalescaperooms.com canvas實(shí)現(xiàn)加載條動(dòng)畫(huà)</title> </head> <body> <canvas id="loadingProgressCanvas"></canvas> <script> /* * 獲取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; } } </script> </body></html>希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
