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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 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函数http_build_query使用详解
2014/08/20 PHP
php单一接口的实现方法
2015/06/20 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery中多个元素的Hover事件解决方案
2014/06/12 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python图算法实例分析
2016/08/13 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
ipad上运行python的方法步骤
2019/10/12 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
keras 读取多标签图像数据方式
2020/06/12 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
会计岗位描述
2014/02/22 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
店长岗位职责
2015/02/11 职场文书
举起手来观后感
2015/06/09 职场文书