欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

canvas怎么實(shí)現(xiàn)環(huán)形進(jìn)度條效果

這篇文章將為大家詳細(xì)講解有關(guān)canvas怎么實(shí)現(xiàn)環(huán)形進(jìn)度條效果，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

渦陽網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

canvas怎么實(shí)現(xiàn)環(huán)形進(jìn)度條效果

這里就選canvas來簡單寫一下 先上代碼，然后在說一說需要注意的點(diǎn)：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>canvas環(huán)形進(jì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ù)進(jìn)度去走的一個狀態(tài)
 技術(shù)選型：canvas （挑戰(zhàn)加熟悉）
 思路：
 01 首先中間的文字部分不用說，使用canvas的畫文字。
 02 圓形是個規(guī)則圖形，那么為了避免畫不規(guī)則圖形，我們可以用圓和矩形來重疊出效果。
 a. 大的灰色背景圓
 b. 小一圈的白色背景圓
 c. 以同心圓的圓心為圓心，小圓為半徑為半徑復(fù)制畫10個小的矩形
 */
 //初始化動畫變量
 var requestAnimationFrame = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame;
 var cancelAnimationFrame = window.cancelAnimationFrame || window.msCancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelRequestAnimationFrame;
 //初始化當(dāng)前進(jìn)度數(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因?yàn)閍rc0度是從右側(cè)開始的）
 function percentTurn(percentFloat){
 return percentFloat * 360 / 100 - 90;
 }
 //畫當(dāng)前百分比扇形的方法
 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');
 //進(jìn)度扇形
 drawFanForPercent(curPercent);
 //內(nèi)部白色遮擋圓
 drawArc(innerCircle.center,innerCircle.radius,null,null,'fill','#FFF');
 //畫文字
 drawPercentText('當(dāng)前進(jìn)度',curPercent);
 //十個小的矩形
 for(var i=0; i<miniRectCount; i++){
 drawMiniRect(startPoint,rectSize.width,rectSize.height,cirCenter,i*360/miniRectCount);
 }
 }
 //實(shí)例化底圓和內(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è)置第一個小矩形的起始點(diǎn) (這里有誤差)
 // var startPoint = {
 // x: oC.width /2 - 7.5,
 // y: (oC.height - baseCircle.radius*2) / 2
 // };
 //由于平移到中心點(diǎn)之后畫的位置是在畫布外的，所以重新定義
 var startPoint = {
 x:-7.5,
 y:-baseCircle.radius - 2
 };
 //這里開定時去顯示當(dāng)前是百分之幾的進(jìn)度
 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ù)點(diǎn)：
 01 canvas平移
 02 canvas畫布狀態(tài)保存于恢復(fù)
 03 canvas旋轉(zhuǎn)
 04 canvas clearRect配合動畫requestAnimationFrame
 05 canvas寫文字
 */
 </script>
</body>
</html>

接下來說一些注意點(diǎn)和我寫的過程中碰到的疑問：

疑問：

01 整體代碼沒有封裝成一個組件，感興趣的同學(xué)可以封裝一下。 我這有時間也會封裝。

02 畫文字的時候只能單獨(dú)畫一行文字么？ 怎樣進(jìn)行換行？

03 canvas怎樣處理響應(yīng)式？

注意點(diǎn)：

01 畫布平移之后，畫布上的點(diǎn)也會被平移，所以我在定義第一個小矩形的起始點(diǎn)的時候才會重新定義一個負(fù)值。

02 直接畫弧形來控制進(jìn)度不準(zhǔn)確，因?yàn)閍rc會自動closePath(),最終形成這樣的一個效果。

canvas怎么實(shí)現(xiàn)環(huán)形進(jìn)度條效果

03 默認(rèn)圓的0度起始位置是從3點(diǎn)鐘方向開始的（見上圖），那么想從12點(diǎn)鐘位置開始走進(jìn)度，需要減去90度的角度。

04 requestAnimationFrame的回調(diào)函數(shù)在有參數(shù)的情況下還是需要傳參數(shù)的，需要借助匿名函數(shù)回調(diào)，在執(zhí)行體里面去執(zhí)行想要loop的函數(shù)內(nèi)容（可傳參數(shù)）。否者會出現(xiàn)注釋中寫道的pecent不規(guī)則增加的問題。

先就這樣，之后可能會結(jié)合一個上傳圖片的小功能嘗試把它封裝成一個組件。

關(guān)于“canvas怎么實(shí)現(xiàn)環(huán)形進(jìn)度條效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

新聞標(biāo)題：canvas怎么實(shí)現(xiàn)環(huán)形進(jìn)度條效果
URL標(biāo)題：http://www.chinadenli.net/article38/gpdhsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、定制開發(fā)、虛擬主機(jī)、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管