js canvas實現適用于移動端的百分比儀表盤dashboard

2019-11-19 16:03:02

字體：大中小

來源：轉載

供稿：網友

本文為大家分享了canvas實現適用于移動端的百分比儀表盤，供大家參考，具體內容如下

由于最近工作中，經常會遇到一些動態百分比的儀表盤，一開始都是用圖片樣式方式實現；

但是隨著越來越多的項目，決定用canvas繪制一個簡易的儀表盤，便于以后項目中直接使用；

現版本只是書寫為方法形式，也許之后會有時間對其優化為插件形式。

簡簡單單而已，以下直接給出代碼和執行過程中的三張截圖：

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8">   <meta http-equiv="Pragma" content="no-cache">   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>   <meta name="format-detection" content="telephone=no"/>   <meta name="apple-mobile-web-app-capable" content="yes"/>   <meta name="apple-mobile-web-app-status-bar-style" content="black"/>   <title>canvas繪制簡易百分比儀表盤dashboard（建議最好用于移動端）</title>   <style type="text/css">     div{margin:1rem;background:#eee;padding:.3rem; position:relative }     div canvas{background:#cacaca;       -webkit-transform: rotateZ(-270deg);       transform:rotateZ(-270deg);       -webkit-animation:ani01 1s ease 0s both;       animation:ani01 1s ease 0s both;     }      @-webkit-keyframes ani01 {       0%{         -webkit-transform:scale(.5,.5) rotateZ(-270deg);         transform:scale(.5,.5) rotateZ(-270deg);       }       100%{         -webkit-transform:scale(1,1) rotateZ(-90deg);         transform:scale(1,1) rotateZ(-90deg);       }     }     @keyframes ani01 {       0%{         -webkit-transform:scale(.5,.5) rotateZ(-270deg);         transform:scale(.5,.5) rotateZ(-270deg);       }       100%{         -webkit-transform:scale(1,1) rotateZ(-90deg);         transform:scale(1,1) rotateZ(-90deg);       }     }   </style> </head> <body>  <div>   <canvas id="myCanvas1" data-percent="80">     您的瀏覽器不支持canvas標簽。   </canvas>   <span style="display:block;position:absolute;top:.94rem;left:.3rem;width:2rem;text-align:center;font-size:.5rem;font-family:microsoft Yahei" id="dushu" >0</span> </div>  <script type="text/javascript" src="../js/flexible.js"></script> <script type="text/javascript">   var pper=0;   var pper_interal;   var dushu=document.getElementById('dushu');    var aaa=drawCanvanPercent('myCanvas1','rem',2,'#0e9cfa',0.2,'#fff');    function drawCanvanPercent(ele_id,dw,cir_r,cir_color,line_w,fill_color){     if(dw=="rem"){       cir_r=cir_r*(window.screen.width/10);       line_w=line_w*(window.screen.width/10);     }     var canvas = document.getElementById(ele_id);     var circle = {       r : cir_r/2,   //圓的半徑       per : canvas.getAttribute('data-percent'),   //百分比分子       color : cir_color,   //圓的顏色       lineWidth : line_w   //圓的顏色     };     canvas.width=canvas.height=circle.r*2;     canvas.style.borderRadius="50%";     if(canvas.getContext){       var ctx2 = canvas.getContext("2d");       ctx2.fillStyle = fill_color;       ctx2.arc(circle.r, circle.r, circle.r-circle.lineWidth/2, 0, Math.PI*2, false);       ctx2.fill();       var ctx = canvas.getContext("2d");       pper_interal= setInterval(function () {         drawMove(ctx,circle);       }, 10);     }   }    function drawMove(ctx,circle){     if(pper>=circle.per){       pper=circle.per;       clearTimeout(pper_interal);     }else{       pper++;     }     dushu.innerText=pper+'%';     ctx.beginPath();     ctx.strokeStyle = circle.color;     ctx.lineWidth=circle.lineWidth;     ctx.arc(circle.r, circle.r, circle.r, 0, Math.PI*(pper/100)*360/180, false);     ctx.stroke();   }   </script>  </body> </html>

截圖如下：