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


Posted in Javascript onJuly 18, 2017

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

截图如下:

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js定时器的使用(实例讲解)
Jan 06 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
基于openlayers4实现点的扩散效果
Aug 17 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
jquery实现轮播图特效
Apr 12 jQuery
Node.js 深度调试方法解析
Jul 28 Javascript
vue深入解析之render function code详解
Jul 18 #Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 #Javascript
iscroll实现下拉刷新功能
Jul 18 #Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 #Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 #Javascript
iscroll.js滚动加载实例详解
Jul 18 #Javascript
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
nodejs教程之入门
2014/11/21 NodeJs
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
常用的javascript设计模式
2017/01/11 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
python实现简单的计时器功能函数
2015/03/14 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
python学生管理系统开发
2019/01/30 Python
深入了解Django View(视图系统)
2019/07/23 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
大专生自荐信
2013/10/04 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
詹天佑教学反思
2014/04/30 职场文书
经费申请报告范文
2015/05/18 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
《詹天佑》教学反思
2016/02/20 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书