本文详细介绍如何使用HTML5 Canvas和JavaScript实现仿支付宝芝麻信用分的仪表盘动画。内容涵盖画布创建、环形刻度绘制、三角函数计算动点坐标以及requestAnimationFrame动画循环控制，帮助开发者掌握Canvas绘图与动画技巧。
Canvas仪表盘实现概述
这是一个基于Canvas实现的仿支付宝芝麻信用分仪表盘动画效果。
首先，展示原始参考图片：
这是从支付宝应用中截取的截图，分数较低请多包涵。下面是使用Canvas实现的最终效果图：
<canvas id="canvas" width="400" height="700" data-score='724'></canvas>
<!-- 设置data-score，分数区间[400, 900] -->
看起来效果还不错，GIF图在网页中打开可能更流畅（也可能这就是最终效果）。大家可以点击底部预览CodePen上的演示。目前有两个不完美的地方：一是实际芝麻信用表盘刻度是不均匀的，这里为了简化实现采用了均匀刻度；二是表盘上运动点的模糊效果尚未解决，下次再讨论。
画布创建与表盘绘制
接下来介绍实现步骤。第一步，按照惯例创建画布：
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
cWidth = canvas.width,
cHeight = canvas.height;
然后绘制表盘，虽然我不是处女座，但也要尽可能还原原图，关键是确定环形开口的角度。请使用PS测量一下：
测得角度为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();
动点坐标计算与动画控制
刻度部分到此完成，还需要为刻度标注文字和每个分数段的信用级别，具体代码见下文，原理与刻度实现类似，不再赘述。现在最关键的是实现表盘上运动的点（下文简称动点）。我们可以将其视为一个半径很小的圆，绘制在最外层的环形轨道上。Canvas中圆的实现方法为：
ctx.arc(x, y, radius, sAngle, eAngle, false); 我们只需控制x和y坐标即可让动点运动，实现预期效果。因此，创建一个动点对象：
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呢？这就需要用到三角函数。
通过上图可以得出：
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)清除画布。
写得不好，大家凑合看，我相信大家理解代码的能力一定强于理解我这些连自己都不知道在说什么的文字。
好了，以上就是全部内容。
代码：
<!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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。