Canvas實現環形進度條

2022-08-14 05:24:11 字數 1946 閱讀 6786

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 = function


() ,,];


var canvas = document.getelementsbytagname("canvas");


for(var i=0;i) 


}
效果圖：

很明顯起始角不合適

改進如下：

補充：因為在ie下canvas不相容，使用外掛程式excanvas.js，，

excanvas.js實現了大部分canvas的api，在繪圖方面其核心是通過ie的vml去實現的，利用ie支援的vml物件來模擬canvas的繪圖的。但是還成存在以下缺陷：

在速度上與chrome、firefox、safari瀏覽器相距甚遠。也嘗試過用其他方式解決ie問題；方法2種，

第一種：通過判斷標籤的數字大小，分為兩種，大於50，小於50；而改變dt的寬高；

<


div 


class


="canvas"


>


<


dl class


="every_canvas"


>


<


dt><


img 


src="2.png"


alt=""


/>


dt>


<


dd>60%


dd>


dl>


<


dl class


="every_canvas"


>


<


dt><


img 


src="2.png"


alt=""


/>


dt>


<


dd>30%


dd>


dl>


<


dl class


="every_canvas"


>


<


dt><


img 


src="2.png"


alt=""


/>


dt>


<


dd>80%


dd>


dl>


div>


<


style


>


dl,dt,dd


.every_canvas


.every_canvas dt


.every_canvas dd


style


>
js:

if (!document.getelementbyid("canvas").getcontext))


}else


)                }


})}else
效果圖：

環形太直，，太僵硬

利用canvas實現環形進度條

前提 有時候在專案中會有用到進度條的情況，使用css3也可以實現，但是對於效能不好的裝置，或者網路不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。效果圖 dom中，首先定義canvas畫板元素 you browser not support ca...

環形進度條

在專案中做廣告頁，需要乙個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...