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.需求：通過(guò)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 開(kāi)始新路徑繪制
2.3.3 繪制加載圓環(huán)

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

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 () {
? ? ? ? ? ? //每次加載前清除畫(huà)布
? ? ? ? ? ? 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;
? ? ? ? ? ? // 開(kāi)始新的路徑
? ? ? ? ? ? ctx.beginPath();
? ? ? ? ? ? // 繪制新的圓環(huán)
? ? ? ? ? ? ctx.strokeStyle = "lightgreen";
? ? ? ? ? ? ctx.lineWidth = 10;
? ? ? ? ? ? //從頂點(diǎn)位置開(kāi)始
? ? ? ? ? ? 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)文章

uniapp中vuex的應(yīng)用使用步驟
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于uniapp中vuex的應(yīng)用使用,需要的朋友可以參考下
2022-08-08
基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果
這篇文章主要介紹了基于bootstrap實(shí)現(xiàn)廣告輪播帶圖片和文字效果,效果非常棒，需要的朋友可以參考下
2016-07-07
多種js圖片預(yù)加載實(shí)現(xiàn)方式分享
這篇文章主要為大家詳細(xì)介紹了多種js圖片預(yù)加載實(shí)現(xiàn)方式，包括html標(biāo)簽或css加載圖片、純js實(shí)現(xiàn)預(yù)加載，感興趣的小伙伴們可以參考一下
2016-02-02
webpack4.0打包優(yōu)化策略整理小結(jié)
這篇文章主要介紹了webpack4.0打包優(yōu)化策略整理小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
js中join()方法舉例詳解
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個(gè)字符串,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
復(fù)制Input內(nèi)容的js代碼_支持所有瀏覽器，修正了Firefox3.5以上的問(wèn)題
今天作一個(gè)功能，有一個(gè)input，里邊有內(nèi)容，點(diǎn)一下按鈕就復(fù)制里邊的內(nèi)容到剪貼板
2010-06-06
原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果
這篇文章主要為大家詳細(xì)介紹了原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript?Object.defineProperty與proxy代理模式的使用詳細(xì)分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-10-10
用webpack4開(kāi)發(fā)小程序的實(shí)現(xiàn)方法
這篇文章主要介紹了用webpack4開(kāi)發(fā)小程序的實(shí)現(xiàn)方法，分享通過(guò)webpack來(lái)構(gòu)建小程序的開(kāi)發(fā)架構(gòu)，感興趣的小伙伴們可以參考一下
2019-06-06
前端canvas實(shí)現(xiàn)電子簽約完成線(xiàn)上簽署功能
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來(lái)越多采用電子簽約的方式進(jìn)行,好處不用多說(shuō)節(jié)約成本,節(jié)約時(shí)間,下面我們來(lái)看看使用canvas實(shí)現(xiàn)電子簽約完成線(xiàn)上簽署功能
2025-01-01