Canvas實現多個圓形進度條顯示百分比,並繫結各自的click事件
阿新 • • 發佈:2018-11-29
Canvas實現多個圓形進度條顯示百分比,並繫結各自的click事件
目錄
實現效果
製作單個圓形進度條
詳情請參照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輕量級圓形進度指示器外掛。這篇小記,希望對大家有幫助。