JavaScript canvas繪制圓形加載進度條

更新時間：2022年06月30日 09:26:24 作者：Yesir_mao

這篇文章主要為大家詳細介紹了JavaScript canvas繪制圓形加載進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript canvas繪制圓形加載進度條的具體代碼，供大家參考，具體內(nèi)容如下

1.需求：通過canvas繪制一個圓形的進度條

2.實現(xiàn)思路：

2.1 繪制灰色底框

2.2 創(chuàng)建變量保存結(jié)束角度值和加載進度值

2.3 創(chuàng)建定時繪制進度條

2.3.1 修改結(jié)束角度
2.3.2 開始新路徑繪制
2.3.3 繪制加載圓環(huán)

3.實現(xiàn)過程如下：

css樣式設置

body {
? ? ? ? ? ? text-align: center;
? ? ? ? }

? ? ? ? canvas {
? ? ? ? ? ? background: #ffffff;
? ? ? ? }

4.html如下：

<canvas id="circle" width="500" height="400"></canvas>

5.js實現(xiàn)如下：

var circle = document.getElementById("circle");
? ? ? ? var ctx = circle.getContext("2d");
? ? ? ? //結(jié)束角度
? ? ? ? var end = -90;
? ? ? ? // 創(chuàng)建變量，進度值1%
? ? ? ? var load = 0;
? ? ? ? // 創(chuàng)建定時器，繪制進度條
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? //每次加載前清除畫布
? ? ? ? ? ? ctx.clearRect(0, 0, 500, 400);
? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? // 灰色底框
? ? ? ? ? ? ctx.strokeStyle = "#eee"; //底框的背景顏色
? ? ? ? ? ? ctx.lineWidth = 10; //底框的寬度
? ? ? ? ? ? //底框顯示的位置想x,y,r,start,end
? ? ? ? ? ? ctx.arc(250, 200, 100, 0, 2 * Math.PI); ?
? ? ? ? ? ? ctx.stroke(); //繪制底框，空心圓
? ? ? ? ? ? // 修改結(jié)束角度
? ? ? ? ? ? end += 3.6;
? ? ? ? ? ? // 開始新的路徑
? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? // 繪制新的圓環(huán)
? ? ? ? ? ? ctx.strokeStyle = "lightgreen";
? ? ? ? ? ? ctx.lineWidth = 10;
? ? ? ? ? ? //從頂點位置開始
? ? ? ? ? ? ctx.arc(250, 200, 100, -90 * Math.PI / 180, end * Math.PI / 180);
? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? // 設置中間的文字字體和大小
? ? ? ? ? ? ctx.font = "18px SimHei";
? ? ? ? ? ? load++;
? ? ? ? ? ? // 設置圖形文字
? ? ? ? ? ? ctx.fillText("已加載完成：" + load + "%", 180, 208);
? ? ? ? ? ? if (load == 100) {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? }
? ? ? ? }, 200);

6.實現(xiàn)效果如下：