js和canvas如何实现适用于移动端的百分比仪表盘dashboard-创新互联

小编给大家分享一下js和canvas如何实现适用于移动端的百分比仪表盘dashboard,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、成都网站制作、乌当网络推广、微信小程序定制开发、乌当网络营销、乌当企业策划、乌当品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们大的嘉奖;创新互联建站为所有大学生创业者提供乌当建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com

具体内容如下

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

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

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

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

 
 
 
   
   
   
   
   
   
  canvas绘制简易百分比仪表盘dashboard(建议最好用于移动端) 
   
    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标签。        
          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();    }         

截图如下:

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

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

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

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

JavaScript的特点

1.JavaScript主要用来向HTML页面添加交互行为。 2.JavaScript可以直接嵌入到HTML页面,但写成单独的js文件有利于结构和行为的分离。 3.JavaScript具有跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。

以上是“js和canvas如何实现适用于移动端的百分比仪表盘dashboard”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站栏目:js和canvas如何实现适用于移动端的百分比仪表盘dashboard-创新互联
标题链接:http://scyanting.com/article/deiepe.html