canvas實現(xiàn)環(huán)形進度條效果
更新時間：2017年03月23日 08:49:37 作者：differ_wy
本文主要介紹了canvas實現(xiàn)環(huán)形進度條效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧
昨下午睡著了，晚上打開手機才發(fā)現(xiàn)朋友給我發(fā)了一個QQ消息，問我這個怎么實現(xiàn)？
這里就選canvas來簡單寫一下 先上代碼，然后在說一說需要注意的點：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas環(huán)形進度條</title>
<style>
body{
background-color:#000;
text-align: center;
}
.canvas1{
margin-top: 100px;
display: inline-block;
background-color: #FFF;
}
</style>
</head>
<body>
<canvas id="circle_process" class="canvas1"></canvas>
<script>
/*
需求：環(huán)形、一周分為10個片段，根據(jù)進度去走的一個狀態(tài)
技術(shù)選型：canvas （挑戰(zhàn)加熟悉）
思路：
01 首先中間的文字部分不用說，使用canvas的畫文字。
02 圓形是個規(guī)則圖形，那么為了避免畫不規(guī)則圖形，我們可以用圓和矩形來重疊出效果。
a. 大的灰色背景圓
b. 小一圈的白色背景圓
c. 以同心圓的圓心為圓心，小圓為半徑為半徑復制畫10個小的矩形
*/
//初始化動畫變量
var requestAnimationFrame = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.msCancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelRequestAnimationFrame;
//初始化當前進度數(shù)
var curPercentCount = 0;
//獲取canvas對象，設(shè)置畫布大小
var oC = document.querySelector('#circle_process');
oC.width = 300;
oC.height = 300;
//獲取canvas執(zhí)行上下文
var ctx = oC.getContext('2d');
//定義小矩形的個數(shù)
var miniRectCount = 10;
//定義圓心位置
var cirCenter = {
x:oC.width/2,
y:oC.height/2
};
//定義小矩形的大小rectSize
var rectSize = {
width:0,
height:0
};
//圓對象構(gòu)造函數(shù)
function Circle(center,radius){
this.center = center;
this.radius = radius;
}
//小矩形對象構(gòu)造函數(shù)
function MiniRect(length,width){
this.length = length;
this.width = width;
}
//角度轉(zhuǎn)換成弧度的函數(shù)
function d2a(angleInt){
return angleInt*Math.PI / 180;
}
//百分比轉(zhuǎn)換角度函數(shù)（這里減90因為arc0度是從右側(cè)開始的）
function percentTurn(percentFloat){
return percentFloat * 360 / 100 - 90;
}
//畫當前百分比扇形的方法
function drawFanForPercent(percentFloat){
ctx.beginPath();
ctx.moveTo(cirCenter.x,cirCenter.y);
ctx.lineTo(oC.width/2,(oC.height-baseCircle.radius*2)/2);
ctx.arc(cirCenter.x,cirCenter.y,baseCircle.radius,d2a(-90),d2a(percentTurn(percentFloat)));
ctx.fillStyle = 'aqua';
ctx.fill();
ctx.closePath();
}
//畫圓的函數(shù)
function drawArc(center,radius,start,end,type,color){
start = start || 0;
end = end || 360;
ctx.beginPath();
ctx.arc(center.x,center.y,radius,d2a(start),d2a(end));
ctx.fillStyle = color;
ctx.strokeStyle = color;
if(!!type){
(type === 'fill') && ctx.fill();
(type === 'stroke') && ctx.stroke();
}
ctx.closePath();
}
//畫文字的函數(shù)
function drawPercentText(text,percentInt){
ctx.beginPath();
ctx.fillStyle = 'aqua';
ctx.font="italic small-caps bold 40px Calibri";
ctx.textAlign = 'center';
ctx.fillText(text,cirCenter.x,cirCenter.y-18,100);
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = 'aqua';
ctx.font="italic small-caps bold 60px Calibri";
ctx.textAlign = 'center';
ctx.fillText(percentInt+'%',cirCenter.x,cirCenter.y+40,100);
ctx.closePath();
}
//畫小方塊的方法
function drawMiniRect(startPoint,width,height,axisPoint,rotateAngle){
/*
ctx.beginPath();
//平移，畫出第一個
ctx.save();
ctx.translate(startPoint.x,startPoint.y);
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,rectSize.width,rectSize.height);
ctx.restore();
ctx.closePath();
//這種先平移畫出在旋轉(zhuǎn)的思路是錯的，畫之后就不能轉(zhuǎn)了
ctx.save();
ctx.translate(axisPoint.x,axisPoint.y);
ctx.rotate(rotateAngle);
ctx.restore();
*/
ctx.save();
ctx.translate(axisPoint.x,axisPoint.y); /*畫布平移到圓的中心*/
ctx.rotate(d2a(rotateAngle)); /*旋轉(zhuǎn)*/
/*畫*/
ctx.beginPath();
ctx.fillStyle = '#FFF';
ctx.fillRect(startPoint.x,startPoint.y,rectSize.width,rectSize.height);
ctx.closePath();
ctx.restore();
}
//畫整體
function draw(curPercent){
//底部灰色圓
drawArc(baseCircle.center,baseCircle.radius,null,null,'fill','#CCC');
//進度扇形
drawFanForPercent(curPercent);
//內(nèi)部白色遮擋圓
drawArc(innerCircle.center,innerCircle.radius,null,null,'fill','#FFF');
//畫文字
drawPercentText('當前進度',curPercent);
//十個小的矩形
for(var i=0; i<miniRectCount; i++){
drawMiniRect(startPoint,rectSize.width,rectSize.height,cirCenter,i*360/miniRectCount);
}
}
//實例化底圓和內(nèi)圓
var baseCircle = new Circle(cirCenter,130);
var innerCircle = new Circle(cirCenter,100);
//設(shè)置rectSize數(shù)值
rectSize.width = 15;
rectSize.height = baseCircle.radius - innerCircle.radius + 5;
//設(shè)置第一個小矩形的起始點 (這里有誤差)
// var startPoint = {
// x: oC.width /2 - 7.5,
// y: (oC.height - baseCircle.radius*2) / 2
// };
//由于平移到中心點之后畫的位置是在畫布外的，所以重新定義
var startPoint = {
x:-7.5,
y:-baseCircle.radius - 2
};
//這里開定時去顯示當前是百分之幾的進度
var raf = null;
var percent = 0;
function actProcess(percentFloat){
percentFloat = percentFloat || 100;
percent = Math.round(percentFloat);
console.log(percent);
curPercentCount++;
raf = requestAnimationFrame(function(){
actProcess(percentFloat);
});
draw(curPercentCount);
if(curPercentCount >= percent){
cancelAnimationFrame(raf);
return;
}
}
actProcess(50);
// cancelAnimationFrame(raf);
//這里沒搞懂為什么percent會加 ？
//解： requestAnimationFrame中方法還是需要有參數(shù)，這里就用匿名函數(shù)回調(diào)的執(zhí)行體去指定。
/*
//setInterval的方式
function actProcess(percentFloat){
if(curPercentCount >= percentFloat){
clearInterval(timer);
return;
}
curPercentCount++;
draw(curPercentCount);
}
clearInterval(timer);
var timer = setInterval(function(){
actProcess(50);
},16.7);
*/
//直接畫弧形的測試：
//drawArc(innerCircle.center,innerCircle.radius,0,260,'fill','red');
/*
用到的技術(shù)點：
01 canvas平移
02 canvas畫布狀態(tài)保存于恢復
03 canvas旋轉(zhuǎn)
04 canvas clearRect配合動畫requestAnimationFrame
05 canvas寫文字
*/
</script>
</body>
</html>
接下來說一些注意點和我寫的過程中碰到的疑問：
疑問：
01 整體代碼沒有封裝成一個組件，感興趣的同學可以封裝一下。 我這有時間也會封裝。
02 畫文字的時候只能單獨畫一行文字么？ 怎樣進行換行？
03 canvas怎樣處理響應(yīng)式？
注意點：
01 畫布平移之后，畫布上的點也會被平移，所以我在定義第一個小矩形的起始點的時候才會重新定義一個負值。
02 直接畫弧形來控制進度不準確，因為arc會自動closePath(),最終形成這樣的一個效果。
03 默認圓的0度起始位置是從3點鐘方向開始的（見上圖），那么想從12點鐘位置開始走進度，需要減去90度的角度。
04 requestAnimationFrame的回調(diào)函數(shù)在有參數(shù)的情況下還是需要傳參數(shù)的，需要借助匿名函數(shù)回調(diào)，在執(zhí)行體里面去執(zhí)行想要loop的函數(shù)內(nèi)容（可傳參數(shù)）。否者會出現(xiàn)注釋中寫道的pecent不規(guī)則增加的問題。
先就這樣，之后可能會結(jié)合一個上傳圖片的小功能嘗試把它封裝成一個組件。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實例形式詳細分析了寄生組合式繼承原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2018-01-01
javascript模擬實現(xiàn)C# String.format函數(shù)功能代碼
這篇文章主要介紹了javascript模擬實現(xiàn)C# String.format函數(shù)功能,相信大家可以用的到2013-11-11
JavaScript高級程序設(shè)計 事件學習筆記，需要的朋友可以參考下。2011-09-09
django js 實現(xiàn)表格動態(tài)標序號的實例代碼
本文通過實例代碼給大家介紹了django js 實現(xiàn)表格動態(tài)標序號 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了javascript中Function類型詳解的相關(guān)資料,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)硪黄獙SON字符串轉(zhuǎn)換成Map對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
IScroll5 中文API參數(shù)說明和調(diào)用方法
IScroll是移動頁面上被使用的一款仿系統(tǒng)滾動插件。IScroll5相對于之前的IScroll4改進了許多，使得大家可以更方便的定制所需的功能了。2016-05-05
這篇文章主要介紹了Javascript進制轉(zhuǎn)換方法,實例分析了javascript實現(xiàn)進制轉(zhuǎn)換的技巧,需要的朋友可以參考下2015-05-05
Javascript下的keyCode鍵碼值表...2007-04-04
JS中的prototype與面向?qū)ο蟮膶嵗v解，需要的朋友可以參考一下2013-05-05