站長資訊網(wǎng)最近在逛問答的時(shí)候，遇到有人問道怎么制作動(dòng)態(tài)的圓形進(jìn)度功能具體效果如下：
本人的想法有兩種，但是利用canvas無疑是最方便的解決辦法，在此以canvas實(shí)現(xiàn)為例子，具體實(shí)現(xiàn)步驟如下：
1.建立前臺(tái)顯示的canvas容器，代碼如下：
<span style="font-family:Courier New;font-size:18px;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>H5 canvas制作圓形動(dòng)態(tài)加載進(jìn)度實(shí)例</title> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </head> <body> <canvas id="loading" width="300" height="300"></canvas> </body> </html></span>
2.獲取canvas容器，建立繪畫對(duì)象，代碼如下：
<span style="font-family:Courier New;font-size:18px;">var loading=document.getElementById('loading'); var context=loading.getContext('2d');</span>
3.繪制初始灰色圓圈，圓圈實(shí)際上是由兩個(gè)同心圓形疊加形成的，代碼如下：
<span style="font-family:Courier New;">context.beginPath();//開始路徑 context.arc(150,150,150,0,2*Math.PI);//繪制外圈圓 context.fillStyle='#ccc';//設(shè)置外圈圓填充顏色 context.fill();//填充顏色 context.beginPath();//開始路徑 context.arc(150,150,130,0,2*Math.PI);//繪制內(nèi)圈圓 context.fillStyle='#fff';//設(shè)置內(nèi)圈圓填充顏色（最好是和背景色相同） context.fill();//填充顏色</span>
4.加入進(jìn)度百分比，代碼如下：
<span style="font-family:Courier New;">context.fillStyle='#ccc';//設(shè)置字體顏色（同樣為灰色） context.font="110px 微軟雅黑 ";//設(shè)置填充文本的大小和字體（順序不可改變）</span>
5.根據(jù)進(jìn)度值修改繪畫空間大小，代碼如下：
<span style="font-family:Courier New;">context.beginPath();//開始路徑（這是指繪制空間的路徑） context.rect(0,300*(1-temp),300,300*temp);//根據(jù)進(jìn)度值改變繪制空間大小 context.clip();//根據(jù)路徑剪切得到新的繪制空間</span>
6.在新的繪制空間繪制進(jìn)度圓環(huán)和進(jìn)度百分比，代碼和之前的幾乎一樣，只需修改填充顏色，代碼如下：
<span style="font-family:Courier New;">context.beginPath(); context.arc(150,150,150,0,2*Math.PI); context.fillStyle='aquamarine';//設(shè)置新的填充顏色 context.fill(); context.beginPath(); context.arc(150,150,130,0,2*Math.PI); context.fillStyle='#fff'; context.fill(); context.fillStyle='aquamarine';//設(shè)置新的填充顏色 context.font="110px 微軟雅黑 ";</span>
到此已經(jīng)完成了靜態(tài)的圓形進(jìn)度效果，接下來就是利用定時(shí)器修改當(dāng)前進(jìn)度值反復(fù)繪制即可，但是需要注意的是在外圈圓環(huán)和進(jìn)度百分比添加完后，需要用
<span style="font-family:Courier New;">context.save();</span>
來保存當(dāng)前回話空間，在所有繪畫完成后再利用
<span style="font-family:Courier New;">context.restore();</span>
來還原最初的繪畫空間，因?yàn)樾薷睦L畫空間都是在當(dāng)前繪畫空間下進(jìn)行剪切得到的，所以每完成一次所有繪畫都需要還原到初始的繪畫空間，下面是完整的js代碼：
<span style="font-family:Courier New;">window.onload=function(){ var loading=document.getElementById('loading'); var context=loading.getContext('2d'); var num=parseInt(Math.random()*100)/100;//模擬獲取進(jìn)度值 var temp=0;//當(dāng)前進(jìn)度值 var time=1000;//動(dòng)畫總時(shí)長 var step=1000*0.01/num;//動(dòng)畫步長 function loadanimate(){ context.beginPath(); context.arc(150,150,150,0,2*Math.PI); context.fillStyle='#ccc'; context.fill(); context.beginPath(); context.arc(150,150,130,0,2*Math.PI); context.fillStyle='#fff'; context.fill(); context.fillStyle='#ccc'; context.font="110px 微軟雅黑 "; if(temp>0.09){//調(diào)整文本居中 context.fillText(parseInt(temp*100)+"%",45,188); }else{ context.fillText(" "+parseInt(temp*100)+"%",45,188); } context.save(); context.beginPath(); context.rect(0,300*(1-temp),300,300*temp); context.clip(); context.beginPath(); context.arc(150,150,150,0,2*Math.PI); context.fillStyle='aquamarine'; context.fill(); context.beginPath(); context.arc(150,150,130,0,2*Math.PI); context.fillStyle='#fff'; context.fill(); context.fillStyle='aquamarine'; context.font="110px 微軟雅黑 "; if(temp>0.09){ context.fillText(parseInt(temp*100)+"%",45,188); }else{ context.fillText(" "+parseInt(temp*100)+"%",45,188); } context.restore(); setTimeout(function(){ if(num>temp){ temp+=0.01; loadanimate(); } },step); } loadanimate(); }; </span>
