溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了H5 canvas圓形動態加載進度怎么弄，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
具體效果如下：
本人的想法有兩種，但是利用canvas無疑是最方便的解決辦法，在此以canvas實現為例子，具體實現步驟如下：
1.建立前臺顯示的canvas容器，代碼如下：
<span style="font-family:Courier New;font-size:18px;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>H5 canvas制作圓形動態加載進度實例</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容器，建立繪畫對象，代碼如下：
<span style="font-family:Courier New;font-size:18px;">var loading=document.getElementById('loading');
var context=loading.getContext('2d');</span>
3.繪制初始灰色圓圈，圓圈實際上是由兩個同心圓形疊加形成的，代碼如下：
<span style="font-family:Courier New;">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();//填充顏色</span>
4.加入進度百分比，代碼如下：
<span style="font-family:Courier New;">context.fillStyle='#ccc';//設置字體顏色（同樣為灰色） context.font="110px 微軟雅黑 ";//設置填充文本的大小和字體（順序不可改變）</span>
5.根據進度值修改繪畫空間大小，代碼如下：
<span style="font-family:Courier New;">context.beginPath();//開始路徑（這是指繪制空間的路徑） context.rect(0,300*(1-temp),300,300*temp);//根據進度值改變繪制空間大小 context.clip();//根據路徑剪切得到新的繪制空間</span>
6.在新的繪制空間繪制進度圓環和進度百分比，代碼和之前的幾乎一樣，只需修改填充顏色，代碼如下：
<span style="font-family:Courier New;">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 微軟雅黑 ";</span>
到此已經完成了靜態的圓形進度效果，接下來就是利用定時器修改當前進度值反復繪制即可，但是需要注意的是在外圈圓環和進度百分比添加完后，需要用
<span style="font-family:Courier New;">context.save();</span>
來保存當前回話空間，在所有繪畫完成后再利用
<span style="font-family:Courier New;">context.restore();</span>
來還原最初的繪畫空間，因為修改繪畫空間都是在當前繪畫空間下進行剪切得到的，所以每完成一次所有繪畫都需要還原到初始的繪畫空間，下面是完整的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;//模擬獲取進度值
var temp=0;//當前進度值
var time=1000;//動畫總時長
var step=1000*0.01/num;//動畫步長
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){//調整文本居中
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>感謝你能夠認真閱讀完這篇文章，希望小編分享H5 canvas圓形動態加載進度怎么弄內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
