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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
自己的js工具 Event封装
Aug 21 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
javascript数组详解
Oct 22 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
详解JavaScript 的执行机制
Sep 18 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来实现网络服务
2009/09/15 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python正则表达式之对号入座篇
2018/07/24 Python
django的model操作汇整详解
2019/07/26 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
python开发前景如何
2020/06/11 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
C++是不是类型安全的
2014/02/18 面试题
机械个人求职信范文
2014/01/24 职场文书
领导调研接待方案
2014/02/27 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书