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樣式設(shè)置
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();
? ? ? ? ? ? // 設(shè)置中間的文字字體和大小
? ? ? ? ? ? ctx.font = "18px SimHei";
? ? ? ? ? ? load++;
? ? ? ? ? ? // 設(shè)置圖形文字
? ? ? ? ? ? ctx.fillText("已加載完成：" + load + "%", 180, 208);
? ? ? ? ? ? if (load == 100) {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? }
? ? ? ? }, 200);6.實現(xiàn)效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于uniapp中vuex的應(yīng)用使用,需要的朋友可以參考下2022-08-08
基于bootstrap實現(xiàn)廣告輪播帶圖片和文字效果
這篇文章主要介紹了基于bootstrap實現(xiàn)廣告輪播帶圖片和文字效果,效果非常棒，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了多種js圖片預(yù)加載實現(xiàn)方式，包括html標簽或css加載圖片、純js實現(xiàn)預(yù)加載，感興趣的小伙伴們可以參考一下2016-02-02
webpack4.0打包優(yōu)化策略整理小結(jié)
這篇文章主要介紹了webpack4.0打包優(yōu)化策略整理小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個字符串,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10
復制Input內(nèi)容的js代碼_支持所有瀏覽器，修正了Firefox3.5以上的問題
今天作一個功能，有一個input，里邊有內(nèi)容，點一下按鈕就復制里邊的內(nèi)容到剪貼板2010-06-06
這篇文章主要為大家詳細介紹了原生JS仿QQ閱讀點擊展開、收起效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript?Object.defineProperty與proxy代理模式的使用詳細分析
這篇文章主要介紹了JavaScript?Object.defineProperty與proxy代理模式的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
這篇文章主要介紹了用webpack4開發(fā)小程序的實現(xiàn)方法，分享通過webpack來構(gòu)建小程序的開發(fā)架構(gòu)，感興趣的小伙伴們可以參考一下2019-06-06
最近發(fā)現(xiàn)現(xiàn)在租房還是簽合同,越來越多采用電子簽約的方式進行,好處不用多說節(jié)約成本,節(jié)約時間,下面我們來看看使用canvas實現(xiàn)電子簽約完成線上簽署功能2025-01-01