利用canvas實現環形進度條

2022-07-11 16:57:10 字數 1060 閱讀 3774

前提：有時候在專案中會有用到進度條的情況，使用css3也可以實現，但是對於效能不好的裝置，或者網路不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。

效果圖：  

dom中，首先定義canvas畫板元素：  

you browser not support canvas!p>


canvas>
對於不支援canvas的瀏覽器則會顯示：you browser not support canvas!

廣州vi設計公司

接下來是js編寫：

定義canvas.js並在頁面引入

var canvas = document.getelementbyid('canvas'), //獲取canvas元素


context = canvas.getcontext('2d'), //獲取畫圖環境，指明為2d


centerx = canvas.width / 2, //canvas中心點x軸座標


centery = canvas.height / 2, //canvas中心點y軸座標


rad = math.pi * 2 / 100, //將360度分成100份，那麼每乙份就是rad度


speed = 0.1; //載入的快慢就靠它了


//繪製藍色外圈


function bluecircle(n) 


//繪製白色外圈


function whitecircle() 


//百分比文字繪製


function text(n) 


//動畫迴圈


(function drawframe() ());


window.requestanimationframe(drawframe, canvas);
每行**的注釋標註非常清楚，如果還有不理解的可以去看canvas基礎，應該就可以了。

Canvas實現環形進度條

canvas實現環形進度條 直接上 canvas width 200 height 200 60 canvas canvas width 200 height 200 20 canvas canvas width 200 height 200 50 canvas js window.onload f...

環形進度條

在專案中做廣告頁，需要乙個5s倒計時的進度條。就用了calayer寫了乙個簡單的進度條。直接上 import inte ce circularprogressview uiview void start void stop import circularprogressview.h import i...

環形進度條

先上效果圖 不多。直接貼 html 0 css body box rotate left right center popu left before left after input radius bg radius dot radius dot before radius dot before s...