這篇文章主要為大家展示了“H5中canvas如何繪制圓環(huán)百分比進(jìn)度”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“H5中canvas如何繪制圓環(huán)百分比進(jìn)度”這篇文章吧。

創(chuàng)新互聯(lián)建站專(zhuān)業(yè)為企業(yè)提供蛟河網(wǎng)站建設(shè)、蛟河做網(wǎng)站、蛟河網(wǎng)站設(shè)計(jì)、蛟河網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、蛟河企業(yè)網(wǎng)站模板建站服務(wù)，十年蛟河做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1.效果圖

2.原理
第一步繪制一個(gè)整圓顏色自定義，第二部繪制一個(gè)內(nèi)圓，其半徑要小于外圓顏色自定
最后一步按照百分比繪制第三個(gè)圓，顏色自定。
要實(shí)現(xiàn)動(dòng)態(tài)繪制第三步的效果，只要添加一個(gè)定時(shí)器的功能，每隔一段時(shí)間繪制一段距離，設(shè)定一個(gè)閥值
當(dāng)大于這個(gè)閥值得時(shí)候就清空這個(gè)定時(shí)器，這個(gè)閥值其實(shí)就是要顯示的百分比值。每次繪制0.01.
注意：在定時(shí)器內(nèi)繪制時(shí)，要把第二步繪制內(nèi)圓，空白圓也在定時(shí)器中繪制。

3.知識(shí)點(diǎn)
繪制公式：arc(x, y, radius, startRad, endRad, anticlockwise)
在canvas畫(huà)布上繪制以坐標(biāo)點(diǎn)(x,y)為圓心、半徑為radius的圓上的一段弧線。這段弧線的起始弧度是startRad，結(jié)束弧度是endRad。這里的弧度是以x軸正方向(時(shí)鐘三點(diǎn)鐘)為基準(zhǔn)、進(jìn)行順時(shí)針旋轉(zhuǎn)的角度來(lái)計(jì)算的。anticlockwise表示是以逆時(shí)針?lè)较蜻€是順時(shí)針?lè)较蜷_(kāi)始繪制，如果為true則表示逆時(shí)針，如果為false則表示順時(shí)針。anticlockwise參數(shù)是可選的，默認(rèn)為false，即順時(shí)針。

4.js源代碼

最后需用調(diào)用circleProgress這個(gè)方法，并把相應(yīng)的參數(shù)穿進(jìn)去。博主是這樣寫(xiě)的,通過(guò)點(diǎn)擊按鈕觸發(fā)。。。

以上是“H5中canvas如何繪制圓環(huán)百分比進(jìn)度”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！