javascript - 心率监测器

Question

好的，所以我按照之前关于创建心率监视器的帖子进行了一些调整以适应我的网页设计。除了设置 Var Data 之外，我如何一遍又一遍地随机化 1 到 300 之间的数字，直到总共达到 200 个随机数并绘制它们？谢谢你的时间。这是我的代码，但我取出了大部分 Var 数据，因为它有 200 个数字长!

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#dbbd7a";
        ctx.fill();

        var fps = 60;
        var n = 1;


        var data = [
             110, 149, 89, 150, 117, 150, 143, 82, 12, 92, 144, 73, 82, 200,
            177, 149, 199, 116, 88, 105, 123, 12, 82, 72, 66, 15, 177, 182,
            199, 116, 159, 150, 100, 10, ];


        drawWave();

        function drawWave() {
            setTimeout(function() {
                requestAnimationFrame(drawWave);
                ctx.lineWidth = "1";
                ctx.strokeStyle = 'green';

                n += 1;
            if (n >= data.length) {
                n = 1;
            }
            ctx.beginPath();
            ctx.moveTo(n - 1, data[n - 1 ]);
            ctx.lineTo(n, data[n]);
            ctx.stroke();

            ctx.clearRect(n+1, 0, 10, canvas.height);
    }, 1000 / fps);
        }

    </script>

Answer 1

本质是这样的:一个大小为 200 的数组，因为您需要 200 个值，并使用循环随机填充这些值。

Math.random 将生成一个介于 0(含)和 1(不包含)之间的数字，乘以 300 将得到 0 到 299.99 之间的任何值... Math.floor () 删除小数位(范围变为0到299)；所以我们在最后加 1 以获得您想要的 1 到 300 范围。

希望这有帮助

var data = [];
for(var i = 0; i < 200; ++i) {
   data[i] = Math.floor(Math.random() * 300) + 1;
}