欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript canvas繪制圓形加載進(jìn)度條

 更新時(shí)間：2022年06月30日 09:26:24   作者：Yesir_mao  
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制圓形加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

1.需求：通過canvas繪制一個(gè)圓形的進(jìn)度條

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

2.1 繪制灰色底框

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

2.3 創(chuàng)建定時(shí)繪制進(jìn)度條

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

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

css樣式設(shè)置

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

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

4.html如下：

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

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

var circle = document.getElementById("circle");
? ? ? ? var ctx = circle.getContext("2d");
? ? ? ? //結(jié)束角度
? ? ? ? var end = -90;
? ? ? ? // 創(chuàng)建變量，進(jìn)度值1%
? ? ? ? var load = 0;
? ? ? ? // 創(chuàng)建定時(shí)器，繪制進(jìn)度條
? ? ? ? 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;
? ? ? ? ? ? //從頂點(diǎn)位置開始
? ? ? ? ? ? ctx.arc(250, 200, 100, -90 * Math.PI / 180, end * Math.PI / 180);
? ? ? ? ? ? ctx.stroke();
? ? ? ? ? ? // 設(shè)置中間的文字字體和大小
? ? ? ? ? ? ctx.font = "18px SimHei";
? ? ? ? ? ? load++;
? ? ? ? ? ? // 設(shè)置圖形文字
? ? ? ? ? ? ctx.fillText("已加載完成：" + load + "%", 180, 208);
? ? ? ? ? ? if (load == 100) {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? }
? ? ? ? }, 200);

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論