canvas仿芝麻信用分仪表盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <title>征信分数</title>
    <style>
 html, body {
            width: 100%;
 height: 100%;
 margin: 0;
 }
        canvas {
            display: block;
 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>
</head>
<body style="height: 100%;width: 100%;margin: 0;padding: 0;">
<canvas id="canvas" data-score='700' data-time='2018.06.01'></canvas>
</body>
<script>
 var canvas=document.getElementById('canvas');
 function getViewPort(){
        var viewHeight=window.innerHeight||document.documentElement.clientHeight;
 var viewWidth=window.innerWidth||document.documentElement.clientWidth;
 document.body.style.width=viewWidth;
 canvas.width=viewWidth;
 canvas.height=viewHeight;
 }

    getViewPort();
</script>
<script>
 window.onload = function () {
        var canvas = document.getElementById('canvas'),
 ctx = canvas.getContext('2d'),
 cWidth = canvas.width,
 cHeight = canvas.height,
 score = canvas.attributes['data-score'].value,
 stime = canvas.attributes['data-time'].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 , 60);
 } else if (score < 600 && score >= 500) {
                    ctx.fillText('信用中等', 0 , 60);
 } else if (score < 700 && score >= 600) {
                    ctx.fillText('信用良好', 0 , 60);
 } else if (score < 800 && score >= 700) {
                    ctx.fillText('信用优秀', 0 , 60);
 } else if (score <= 900 && score >= 800) {
                    ctx.fillText('信用极好', 0 , 60);
 }

                ctx.fillStyle = '#80cbfa';
 ctx.font = '14px Microsoft yahei';
 ctx.fillText('评估时间:'+stime, 0, 80);

 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 = '#fff';
 ctx.font = '80px Microsoft yahei';
 ctx.textAlign = 'center';
 ctx.textBaseLine = 'top';
 ctx.fillText(process, 0 ,10);
 ctx.restore();
 }
    };



</script>
</html>


2018-03-28/5abb3e7a55017.png

雷亮博客
请先登陆后发表评论
  • 最新评论
  • 总共0条评论
  • 本站使用thinkphp搭建 © 2014-2016 www.leigougou.com 版权所有 ICP证:蜀ICP备16024789号-1
  • 联系邮箱:1031041088@qq.com