刻度线动画，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

            
            <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刻度线</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container-tickMarks">
        <canvas id="myCanvas" width="100" height="300"></canvas>
        <div class="val">
            <span id="val">86</span>bpm
        </div>
    </div>
</body>

</html>
<script src="./index.js"></script>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

            
             body {
        background-color: #4a4a53;
        margin: 0;
        padding: 0;
    }
    
    .container-tickMarks {
        position: relative;
        width: 150px;
        height: 450px;
        /* background: url(./img/measuring_xl.png) no-repeat; */
        /* background-size: cover; */
        background-color: #fff;
        box-shadow: 0px 7px 10px 0px rgba(1, 36, 160, 0.06);
        border-radius: 20px;
        margin: 0 auto;
        text-align: center;
        margin-top: 50px;
    }
    
    #myCanvas {
        border-radius: 10px;
        margin-top: 30px;
    }
    
    .val {
        width: 100%;
        position: absolute;
        text-align: center;
        bottom: 30px;
        font-weight: 500;
        font-size: 18px;
        color: #4a4a53;
    }
    
    .val span {
        font-weight: 500;
        font-size: 48px;
        color: #4a4a53;
    }

编辑器加载中

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

            
                var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");


    var yaxis_start = 40; //坐标轴开始值
    var yaxis_end = 140; //坐标轴结尾值
    // 定义刻度尺的起点、终点和间隔  Cavan的y轴是反的
    var start = canvas.height - 10; 
    var end = 10;
    var gap = 2;

    var target = 85, //目标值
        cury = yaxis_start; //动画进行时的值
    var step = 0; //动画进度 0~1

    function drawAxis() {

        // console.log(start, end); //290~10 -> 280~0
        // 绘制刻度尺背景
        ctx.fillStyle = "transparent"; //transparent
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        var x_pos = 50;
        var area = yaxis_end - yaxis_start;
        // 绘制刻度尺刻度线
        for (var i = 0; i <= area; i += gap) {
            // 计算刻度线的坐标
            var x = x_pos;
            var y = ((start - end) / area) * (area - i) + end;
            // 绘制刻度线
            let longline = 24;
            let shortline = 12;
            let drawline = shortline;
            if (i % 10 == 0) {
                drawline = longline;
                x = x_pos;
            } else {
                //短线居中
                x = x_pos + (longline - drawline) / 2;
            }
            ctx.strokeStyle = "#8E8D9A";
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + drawline, y);
            ctx.stroke();

            // 绘制刻度值
            ctx.fillStyle = "black";
            ctx.font = "12px Arial";
            let fontgap = 20
            let fontNum = i + yaxis_start;
            if (fontNum < 10) fontgap = 15;
            if (fontNum >= 100)
                fontgap = 25

            if (fontNum % 10 == 0)
                ctx.fillText(fontNum, x - fontgap, y + 5);
        }
    }


    function drawBg() {

        ctx.globalCompositeOperation = 'darken';
        // 创建渐变
        const grdl = ctx.createLinearGradient(0, 0, canvas.width / 2, 0);
        grdl.addColorStop(0, "#E6E9F6");
        grdl.addColorStop(1, "white");

        // 用渐变填充
        ctx.fillStyle = grdl;
        ctx.fillRect(0, 0, canvas.width / 2, canvas.height);

        const grdr = ctx.createLinearGradient(canvas.width / 2, 0, canvas.width, 0, );
        grdr.addColorStop(0, "white");
        grdr.addColorStop(1, "#E6E9F6");

        ctx.fillStyle = grdr;
        ctx.fillRect(canvas.width / 2, 0, canvas.width, canvas.height);
    }



    function drawBar() {
        var val = cury;
        if (val < yaxis_start.value || val > yaxis_end.value || step > 1) {
            return
        };

        ctx.clearRect(0, 0, canvas.width, canvas.height); //清空上一帧
           drawAxis(); //绘制刻度轴
        drawBg(); //绘制背景


        var area = yaxis_end - yaxis_start;
        var h = ((start - end) / area) * (val - yaxis_start);
        var w = 15;
        var x = 55;
        var y = start - h;
        // lighten 绘制新图和原图,重叠部分加色处理
        // darken 保留重叠部分最黑的像素
        // lighter 保证重叠部分最量的像素
        // copy 绘制新图,覆盖原图
        // xor 重叠部分会变成透明
        ctx.globalCompositeOperation = 'darken';
        ctx.fillStyle = "#A4C8FA";
        ctx.fillRect(x, y, w, h);


        // console.log(step);
        //计算y轴增量和y位置
        step += 0.02; //0~1
        var nexty = easeOutQuart(step) * (target - cury) + cury;
        cury = nexty;

        // cury += 0.2; //线性增加
        requestAnimationFrame(drawBar);
    }

    function easeOutQuad(x) {
        return 1 - (1 - x) * (1 - x);
    }

    function easeOutQuart(x) {
        return 1 - Math.pow(1 - x, 4);
    }

    drawBar();

setInterval(() => {
  target = getRandomInt(41, 138);
  document.getElementById("val").innerText = target
  step = 0;
  console.log("重新执行",target);
  drawBar();
}, 1500);

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

编辑器加载中

预览

控制台