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

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

截图如下：

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

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

赞 (0)

相关推荐

  • javascript下正则匹配百分比的代码

    <script language="javascript">     var re = /^-?\d+%$/;     alert(re.test('50%'));     alert(re.test('-25%'));     alert(re.test('3a5%')); </script>

  • js canvas仿支付宝芝麻信用分仪表盘

    js canvas仿支付宝芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id="canvas" width="400" height="700" data-score='724'></canvas> <!-- 设置data-score,分数区间[400, 900] --> 唉,总感觉不像.这个是G

  • Javascript highcharts 饼图显示数量和百分比实例代码

    Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=

  • 使用javascript获取flash加载的百分比的实现代码

    复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>flash download</title> </head> <body> <object id="movie" classid="clsid:d27cdb6e-ae6d

  • ECharts仪表盘实例代码(附源码下载)

    ECharts仪表盘实例代码(附源码下载)

    大家在汽车驾驶舱里一眼就可以看到仪表盘,使用使用Echarts制作的仪表盘可以轻松展示用户的数据,清晰的看出某个指标值所在的范围,仪表盘形式的报表应用在各种统计系统中,本文结合实例讲解仪表盘在销售任务完成率的统计应用. 效果演示      源码下载 HTML 首先引入Echarts,然后在需要放置图表的地方加上div#myChart,同时给它加上宽度和高度属性. <script src="echarts.min.js"></script> <div id=

  • jquery插件canvaspercent.js实现百分比圆饼效果

    jquery插件canvaspercent.js实现百分比圆饼效果

    在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的jquery插件(jq-canvaspercent.js),暂且版本1.0吧,到以后业务的变化在对其进行功能拓展: 暂时性用于页面中有多处百分比圆环的效果处理,还是不错的. jq-canvaspercent.js代码比较简单,以下直接给出插件代码和几张截图: /* * canvaspercent 0.1 * Copyright:HeavyShell * Date: 2016-06-27 * 利用

  • JavaScript根据数据生成百分比图和柱状图的实例代码

    复制代码 代码如下: <HTML> <head> <title>JS百分比图和柱状图</title>   <xml:namespace prefix="v"/>   <style>    v\:* {behavior=url(#default#VML)}   </style>   <style>   a:hover {color:maroon}   h2 {color:#006600;  

  • javascript 计算两个整数的百分比值

    复制代码 代码如下: ///计算两个整数的百分比值 function GetPercent(num, total) { num = parseFloat(num); total = parseFloat(total); if (isNaN(num) || isNaN(total)) { return "-"; } return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00 + &qu

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

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

    本文为大家分享了canvas实现适用于移动端的百分比仪表盘,供大家参考,具体内容如下 由于最近工作中,经常会遇到一些动态百分比的仪表盘,一开始都是用图片样式方式实现: 但是随着越来越多的项目,决定用canvas绘制一个简易的仪表盘,便于以后项目中直接使用: 现版本只是书写为方法形式,也许之后会有时间对其优化为插件形式. 简简单单而已,以下直接给出代码和执行过程中的三张截图: <!doctype html> <html lang="en"> <head>

  • js 简易版滚动条实例(适用于移动端H5开发)

    废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <title>滑动条</title> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" conte

  • js canvas实现写字动画效果

    本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下 页面html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>学写一个字</title> <script src="jquery-2.1.3.min.js" type="t

  • 基于JS+Canvas的lucky-canvas 抽奖功能

    基于JS+Canvas的lucky-canvas 抽奖功能

    目录 ucky-canvas 介绍 lucky-canvas 功能特点 自由配置 多端适配 响应式 代码块展示 效果图展示 代码如下 抽奖一 抽奖二 抽奖三 ucky-canvas 介绍 一个基于 Js + Canvas 的[大转盘 & 九宫格 & 老虎机]抽奖, 致力于为 web 前端提供一个功能强大且专业可靠的组件, 只需要通过简单配置即可实现自由化定制, 帮助你快速的完成产品需求. lucky-canvas 功能特点 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置

  • jQuery实现适用于移动端的跑马灯抽奖特效示例

    jQuery实现适用于移动端的跑马灯抽奖特效示例

    本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理 跑马灯抽奖特效难点一:奖品位置排放,如下图 <div class="gift_div"> <div class="gift gift1">奖品1</div> <div class="gift gift2">奖品2</div> <div class="gift g

  • js+canvas实现刮刮奖功能

    本文实例为大家分享了js+canvas实现刮刮奖的具体代码,供大家参考,具体内容如下 1.实现了PC端的刮刮奖效果 2.使用了canvas的文本,像素操作,合成,绘制图形,随机数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刮刮奖</title> <style type="text/css"> * { mar

  • JS Canvas接口和动画效果大全

    概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用JavaScript操作的位图(bitmap). 它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像. 使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas id

  • JS+canvas动态绘制饼图的方法示例

    JS+canvas动态绘制饼图的方法示例

    本文实例讲述了JS+canvas动态绘饼图的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net canvas饼状图</title> </head> <body> <canvas id=

  • JS+Canvas实现的俄罗斯方块游戏完整实例

    JS+Canvas实现的俄罗斯方块游戏完整实例

    本文实例讲述了JS+Canvas实现的俄罗斯方块游戏.分享给大家供大家参考,具体如下: 试玩(没有考虑兼容低版本浏览器): ********************************************************************** 9月3日更新: 修复了隐藏的比较深的BUG 加上暂停.再来一次功能 速度随分数增高而递减 添加log日志 ****************************************************************

  • JS+canvas实现的五子棋游戏【人机大战版】

    JS+canvas实现的五子棋游戏【人机大战版】

    本文实例讲述了JS+canvas实现的五子棋游戏.分享给大家供大家参考,具体如下: 运行效果图: html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <link rel="stylesheet" type="text/css" href="css

随机推荐