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

本文为大家分享了canvas实现适用于移动端的百分比仪表盘，供大家参考，具体内容如下

由于最近工作中，经常会遇到一些动态百分比的仪表盘，一开始都是用图片样式方式实现；

但是随着越来越多的项目，决定用canvas绘制一个简易的仪表盘，便于以后项目中直接使用；

现版本只是书写为方法形式，也许之后会有时间对其优化为插件形式。

简简单单而已，以下直接给出代码和执行过程中的三张截图：

 
 
 
   
   
   
   
   
   
   
   
    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); 
      } 
    } 
   
 
 
 
 
   
    您的浏览器不支持canvas标签。 
   
  0 
 
 
 
 
 
 
 

截图如下：

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

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