首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 16, 2016

这是一个仿支付宝芝麻信用分的一个canvas，其实就是一个动画仪表盘。

首先， 上原图：

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

这个是在下支付宝上的截图，分低各位见笑了。然后看下我用canvas实现的效果图：

<canvas id="canvas" width="400" height="700" data-score='724'></canvas>
<!-- 设置data-score，分数区间[400, 900] -->

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

唉，总感觉不像。这个是GIF图，可能在网页上打开的效果会好一点(当然可能就是这样)。大家可以点击底部预览codepen上的演示。有两个不完美的地方，一个是实际上芝麻信用表盘上的的刻度是不均匀的，我这为了简单的实现就采取相同的刻度；二是表盘上运动的点是有模糊的效果，还没解决。唉，下次再说吧。

接下来还是来说说怎么实现的吧。第一步，国际惯例，创建画布：

var canvas = document.getElementById('canvas'),
 ctx = canvas.getContext('2d'),
 cWidth = canvas.width,
 cHeight = canvas.height;

然后绘制表盘，虽说不是处女座，但也要尽可能做到跟原图上的一样，那就是这个环形开口的角度是多少呢？请上ps来测一下：

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

嗯，136°，这个角度确实刁钻，为了方便接下来的计算，那就约等于140°。那么一个分数段的弧度就是：

var deg1 = Math.PI * 11 / 45
先把中间半透明的刻度层画好：

ctx.save(); //中间刻度层
ctx.beginPath();
ctx.strokeStyle = 'rgba(255, 255, 255, .2)';
ctx.lineWidth = 10;
ctx.arc(0, 0, 135, 0, 11 * deg0, false);
ctx.stroke();
ctx.restore();

接着，画6条刻度线，用for循环来实现：

ctx.save(); // 刻度线
for (var i = 0; i < 6; i++) {
 ctx.beginPath();
 ctx.lineWidth = 2;
 ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
 ctx.moveTo(140, 0);
 ctx.lineTo(130, 0);
 ctx.stroke();
 ctx.rotate(deg1);
}
ctx.restore();

同理，再把大刻度细分为5个小刻度：

ctx.save(); // 细分刻度线
for (i = 0; i < 25; i++) {
 if (i % 5 !== 0){
 ctx.beginPath();
 ctx.lineWidth = 2;
 ctx.strokeStyle = 'rgba(255, 255, 255, .1)';
 ctx.moveTo(140, 0);
 ctx.lineTo(133, 0);
 ctx.stroke();
 }
 ctx.rotate(deg1 / 5);
}
ctx.restore();

刻度到这里就ok了，还需要给刻度标上文字和每个分数段的信用级别，具体的参见代码，因为跟刻度实现的原理差不多，就不??铝恕Ｏ衷谧罟丶?褪鞘迪直砼躺夏歉鲈硕?牡悖ú恢?涝趺闯坪簦?挛木徒兴??悖??颐强梢哉庋?耄??歉霭刖逗苄〉脑玻?徊还?腔?谧钔獠慊沸喂斓郎显玻??苍?anvas上的实现方法是：

ctx.arc(x, y, radius, sAngle, eAngle, false);
我们只要控制x, y就能让它动起来，实现我们想要的效果。so，创建一个动点对象：

function Dot() {
 this.x = 0;
 this.y = 0;
 this.draw = function (ctx) {
 ctx.save();
 ctx.beginPath();
 ctx.fillStyle = 'rgba(255, 255, 255, .7)';
 ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
 ctx.fill();
 ctx.restore();
 };
}
var dot = new Dot(),
 dotSpeed = 0.03, //控制动点的速度
 angle = 0, //这个很关键，用来得到动点的坐标x, y
 credit = 400; //信用最低分数

如何得到dot的坐标x, y呢？那就要用到传说中三角函数了。

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

通过上图我们可以得到

x = r * cos(angle), y = r * sin(angle)
在JavaScript中，dot的中心坐标就变成了：

dot.x = radius * Math.cos(angle); //radius为最外层轨道的半径值
dot.y = radius * Math.sin(angle);

接下来我们只要得到这个angle。这个通过弧度与分数的比例关系就可以得到：

var aim = (score - 400) * deg1 / 100;
if (angle < aim) {
 angle += dotSpeed;
}
dot.draw(ctx);

然后让中间的信用分数也能随动点的转动而变化，创建一个text()，为了使数字变化能和动点保持一致，要根据动点的速率来计算数字变化：

function text(process) {
 ctx.save();
 ctx.rotate(10 * deg0);
 ctx.fillStyle = '#000';
 ctx.font = '80px Microsoft yahei';
 ctx.textAlign = 'center';
 ctx.textBaseLine = 'top';
 ctx.fillText(process, 0 ,10);
 ctx.restore();
}
var textSpeed = Math.round(dotSpeed * 100 / deg1),
if (credit < score - textSpeed) {
 credit += textSpeed;
} else if (credit >= score - textSpeed && credit < score) {
 credit += 1; // 这里确保信用分数最后停下来是我们输入的分数
}
text(credit);

最后这一切都逃不过让window.requestAnimationFrame()来控制绘制动画和用ctx.clearRect(0, 0, cWidth, cHeight)来清除画布。

写的不好，大家将就着看，我相信大家理解代码的能力一定强于理解我这些我自己都不知道说什么的文字。

好了，以上。

code：

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title>芝麻信用仪表盘</title>
 <style type="text/css">
  html,
  body {
  width: 100%;
  height: 100%;
  margin: 0;
  }
  
  canvas {
  border: 1px solid #eee;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
  background: -ms-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
  background: -moz-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
  background: linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
  }
 </style>
 <script type="text/javascript">
  window.onload = function() {
  var canvas = document.getElementById('canvas'),
   ctx = canvas.getContext('2d'),
   cWidth = canvas.width,
   cHeight = canvas.height,
   score = canvas.attributes['data-score'].value,
   stage = ['较差', '中等', '良好', '优秀', '极好'],
   radius = 150,
   deg0 = Math.PI / 9,
   deg1 = Math.PI * 11 / 45;
 
  if(score < 400 || score > 900) {
   alert('信用分数区间：400~900');
  } else {
   var dot = new Dot(),
   dotSpeed = 0.03,
   textSpeed = Math.round(dotSpeed * 100 / deg1),
   angle = 0,
   credit = 400;
 
   (function drawFrame() {
 
   ctx.save();
   ctx.clearRect(0, 0, cWidth, cHeight);
   ctx.translate(cWidth / 2, cHeight / 2);
   ctx.rotate(8 * deg0);
 
   dot.x = radius * Math.cos(angle);
   dot.y = radius * Math.sin(angle);
 
   var aim = (score - 400) * deg1 / 100;
   if(angle < aim) {
    angle += dotSpeed;
   }
   dot.draw(ctx);
 
   if(credit < score - textSpeed) {
    credit += textSpeed;
   } else if(credit >= score - textSpeed && credit < score) {
    credit += 1;
   }
   text(credit);
 
   ctx.save();
   ctx.beginPath();
   ctx.lineWidth = 3;
   ctx.strokeStyle = 'rgba(255, 255, 255, .5)';
   ctx.arc(0, 0, radius, 0, angle, false);
   ctx.stroke();
   ctx.restore();
 
   window.requestAnimationFrame(drawFrame);
 
   ctx.save(); //中间刻度层
   ctx.beginPath();
   ctx.strokeStyle = 'rgba(255, 255, 255, .2)';
   ctx.lineWidth = 10;
   ctx.arc(0, 0, 135, 0, 11 * deg0, false);
   ctx.stroke();
   ctx.restore();
 
   ctx.save(); // 刻度线
   for(var i = 0; i < 6; i++) {
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
    ctx.moveTo(140, 0);
    ctx.lineTo(130, 0);
    ctx.stroke();
    ctx.rotate(deg1);
   }
   ctx.restore();
 
   ctx.save(); // 细分刻度线
   for(i = 0; i < 25; i++) {
    if(i % 5 !== 0) {
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'rgba(255, 255, 255, .1)';
    ctx.moveTo(140, 0);
    ctx.lineTo(133, 0);
    ctx.stroke();
    }
    ctx.rotate(deg1 / 5);
   }
   ctx.restore();
 
   ctx.save(); //信用分数
   ctx.rotate(Math.PI / 2);
   for(i = 0; i < 6; i++) {
    ctx.fillStyle = 'rgba(255, 255, 255, .4)';
    ctx.font = '10px Microsoft yahei';
    ctx.textAlign = 'center';
    ctx.fillText(400 + 100 * i, 0, -115);
    ctx.rotate(deg1);
   }
   ctx.restore();
 
   ctx.save(); //分数段
   ctx.rotate(Math.PI / 2 + deg0);
   for(i = 0; i < 5; i++) {
    ctx.fillStyle = 'rgba(255, 255, 255, .4)';
    ctx.font = '10px Microsoft yahei';
    ctx.textAlign = 'center';
    ctx.fillText(stage[i], 5, -115);
    ctx.rotate(deg1);
   }
   ctx.restore();
 
   ctx.save(); //信用阶段及评估时间文字
   ctx.rotate(10 * deg0);
   ctx.fillStyle = '#fff';
   ctx.font = '28px Microsoft yahei';
   ctx.textAlign = 'center';
   if(score < 500) {
    ctx.fillText('信用较差', 0, 40);
   } else if(score < 600 && score >= 500) {
    ctx.fillText('信用中等', 0, 40);
   } else if(score < 700 && score >= 600) {
    ctx.fillText('信用良好', 0, 40);
   } else if(score < 800 && score >= 700) {
    ctx.fillText('信用优秀', 0, 40);
   } else if(score <= 900 && score >= 800) {
    ctx.fillText('信用极好', 0, 40);
   }
 
   ctx.fillStyle = '#80cbfa';
   ctx.font = '14px Microsoft yahei';
   ctx.fillText('评估时间：2016.11.06', 0, 60);
 
   ctx.fillStyle = '#7ec5f9';
   ctx.font = '14px Microsoft yahei';
   ctx.fillText('BETA', 0, -60);
   ctx.restore();
 
   // ctx.save(); //最外层轨道
   ctx.beginPath();
   ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
   ctx.lineWidth = 3;
   ctx.arc(0, 0, radius, 0, 11 * deg0, false);
   ctx.stroke();
   ctx.restore();
 
   })();
  }
 
  function Dot() {
   this.x = 0;
   this.y = 0;
   this.draw = function(ctx) {
   ctx.save();
   ctx.beginPath();
   ctx.fillStyle = 'rgba(255, 255, 255, .7)';
   ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
   ctx.fill();
   ctx.restore();
   };
  }
 
  function text(process) {
   ctx.save();
   ctx.rotate(10 * deg0);
   ctx.fillStyle = '#000';
   ctx.font = '80px Microsoft yahei';
   ctx.textAlign = 'center';
   ctx.textBaseLine = 'top';
   ctx.fillText(process, 0, 10);
   ctx.restore();
  }
  };
 </script>
 </head>
 
 <body>
 <canvas id="canvas" width="400" height="700" data-score='724'></canvas>
 </body>
 
</html>

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

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

- Author -

cometwo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 #Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 #Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 #Javascript
微信小程序 地图（map）实例详解
Nov 16 #Javascript
微信小程序 选择器（时间，日期，地区）实例详解
Nov 16 #Javascript
微信小程序 图片等比例缩放（图片自适应屏幕）
Nov 16 #Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
maven(2) commit(1) procedure(1) Android Gradle(1) Tablespace(1) Navicat(1) 自定义函数(1) V Rising(1) 内置函数(1) 记事本(1)
You might like
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
js中生成map对象的方法
2014/01/09 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
JavaScript深度复制（deep clone）的实现方法
2016/02/19 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
Python性能优化的20条建议
2014/10/25 Python
解析Python中的异常处理
2015/04/28 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
Linux如何压缩可执行文件
2014/03/27 面试题
授权委托书格式模板
2014/04/03 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL