Canvas實現多個圓形進度條顯示百分比，並繫結各自的click事件

目錄

• Canvas實現多個圓形進度條顯示百分比並繫結各自的click事件
  • • 目錄
  • 實現效果
  • 製作單個圓形進度條
    • 詳情請參照HTML5效果Canvas實現圓形進度條並顯示數字百分比
  • 製作多個圓形進度條
    • html程式碼
    • js程式碼
    • 繪製多個圓形進度條的完整程式碼
  • 小記

實現效果

製作單個圓形進度條

詳情請參照HTML5效果：Canvas實現圓形進度條並顯示數字百分比

製作多個圓形進度條

1.html程式碼

 <div id="contain"></div> 
 <!---定義一個div塊，用於放置canvas--->

2.js程式碼

儲存到circle.js中，並放置在與html檔案相同的根目錄下。

function initThis(){
         //初始化資料,json陣列
         //說明：id為標識id（唯一）,name為名字,num為進度 
 

         var init= [{"num":100,"name":"task-2","id":1},   
                    {"num":100,"name":"task-3","id":2},                                                                  
                    {"num":100,"name":"task-4","id":3},
                    {"num":60,"name":"task-5","id":4}];

         var
 
 container = document.getElementById('contain');     //找到裝canvas的div塊


         $.each(init,function(n,task){    
               //JQuery遍歷json陣列 ，task為陣列中的第n個元素。遍歷時完成整個圓形進度條的繪製
               //alert(n+' '+task.name);        

               var Can = document.createElement('canvas'); //create一個新的canvas,並命名為Can
               container.appendChild(Can);      //往div塊中新增這一個名為Can的canvas
               Can.id = task.id;                //設定這一個canvas的屬性:id,name以及寬度和高度
               Can.value =  task.id;
               Can.name = task.name;
               Can.width = 350;
               Can.height = 350;

               var thisCanvas = document.getElementById(task.id); 
               //從dom中get這一個canvas(通過其id)

               aGraph(thisCanvas,task.num,task.name);    
               //繪製這一個canvas對應的圓形進度條

               //繫結canvas事件
               Can.onclick = function(){
                   alert("My name is:"+ task.name);
                }
          });          
      }

/*函式功能：繪製單個圓形進度條（無動畫效果）*/
function aGraph(canvas,number,taskName){    

                /*引數說明*/
                /*canvas：canvas物件*/
                /*number：進度值*/
                /*taskName:所要顯示的文字資訊*/  

                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度
            //繪製藍色外圈
            function blueCircle(n){             
                context.save();
                context.strokeStyle = "#0BFFC4"; //設定描邊樣式
                context.lineWidth = 5;           //設定線寬
                context.beginPath();             //路徑開始
                context.arc(centerX, centerY, 75 ,-Math.PI/2,-Math.PI/2+n*rad, false);                                         
               //用於繪製圓弧context.arc(x座標，y座標，半徑，起始角度，終止角度，順時針/逆時針)
                context.stroke();               //繪製
                context.closePath();            //路徑結束
                context.restore();

            }
            //繪製白色外圈
            function whiteCircle(){
                context.save();
                context.beginPath();
                context.strokeStyle = "#01241B";
                context.arc(centerX, centerY, 75 , 0, Math.PI*2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }  
            //百分比文字繪製
            function text(n){
                context.save();              //save和restore可以保證樣式屬性只運用於該段canvas元素
                context.strokeStyle = "#fff"; //設定描邊樣式
                context.font = "20px Arial";  //設定字型大小和字型
                //繪製字型，並且指定位置
                context.strokeText( n +"%" , centerX-17, centerY-13);
                context.strokeText( taskName , centerX-27, centerY+30);
                context.stroke();             //執行繪製
                context.restore();
            } 

            //動畫繪製
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(number);       
                blueCircle(number);
            }());
    }

3.繪製多個圓形進度條的完整程式碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas實現多個圓形進度條顯示百分比和文字資訊，並繫結各自的click事件</title>

<script src="jquery-3.2.1.js" type="text/javascript"></script>
<!---引用所需要的JQuery.js。這裡，我把jquery.js下載後，放到與html檔案一樣的資料夾下了。--->
<script src="circle.js" type="text/javascript"></script> <!--引入繪製圓形進度條的js檔案-->

<style>
#contain{left:3.5%;width:100%;height:100%;overflow-y:scroll;

canvas{margin-top:3%;margin-left:3%;margin-bottom:0.5%;
       background-color:#000;;
       position:relative;}

</style>

</head>

<body onload="initThis();"> 
<!---在頁面載入時，呼叫initThis（）函式，完成對圓形進度條的繪製--->

<div id="contain"></div>

</body>
</html>

小記：

採用這一個初始化多個圓形進度條的方法，是沒有動畫效果的，繪製進度條的程式碼有點長。
如果只是想要繪製一個圓形進度條，可參照本文的 製作單個進度條（有動畫效果）。
還可以用JQurey的一款輕量級圓形指示器外掛radialIndicator。參照jQuery輕量級圓形進度指示器外掛。

這篇小記，希望對大家有幫助。