js canvas实现适用于移动端的百分比仪表盘dashboard

本文为大家分享了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>

截图如下：

建议：不要因为简单而不去动手，多动手多思考，你会进步的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。