javascript - 如何使用 HTML5 在画布中绘制心电图监视器？

Question

我正在尝试使用canvas html5来绘制心电图系统。

几乎我即将完成我的波浪正在移动，但不是连续它在重复，但我想画波浪是从左到右连续移动吗？

以下链接是示例。

例如：https ://www.youtube.com/watch?v=wuwBfSpVEgw

我每 1 秒获取一次数据。

数据例：

var ydata = [
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                    148,149,149,150,150,150,143,82,82,82,82,82,82,82,
                ];

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <canvas id="canvas" width="160" height="160" style="background-color: black;"></canvas>
        <script type='text/javascript'>

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

            var fps = 60;
            var n = 1;


            var data = [
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
                148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82, ];


            drawWave();

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

                    // Drawing code goes here
                    n += 1;
                    if (n >= data.length) {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        n = 1;
                    }
                    ctx.beginPath();
                    ctx.moveTo(n - 1, data[n - 1]);
                    ctx.lineTo(n, data[n]);
                    ctx.stroke();

                }, 1000 / fps);
            }

        </script>
    </body>
</html>

score 5 · Accepted Answer

如果您想让它看起来像视频，请不要在每次传递结束时清除帧，只需将其清除到路径末端的右侧即可。

                // Drawing code goes here
                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);

演示：http: //jsfiddle.net/Shp4X/

那是你想要的吗？

score 1 · Accepted Answer

var EcgData=[];    
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width,
    h = canvas.height,
    speed = 1,
    scanBarWidth = 20,
    i=0,
    data = EcgData[0].split(','),
    color='#00ff00';
var px = 0;
var opx = 0;
var py = h/2;
var opy = py;
ctx.strokeStyle = color;
ctx.lineWidth = 3;
ctx.setTransform(1,0,0,-1,0,h);

drawWave();

function drawWave() {
     px += speed;
     ctx.clearRect( px,0, scanBarWidth, h);
     ctx.beginPath();
     ctx.moveTo( opx,  opy);
     ctx.lineJoin= 'round';
     py=(data[++i>=data.length? i=0 : i++]/450+10);
     ctx.lineTo(px, py);
     ctx.stroke();
     opx = px;
     opy = py;
     if (opx > w) {px = opx = -speed;}

     requestAnimationFrame(drawWave);
 }

演示：https ://jsfiddle.net/majidagt/hc18mvbw/

score 0 · Accepted Answer

setTimeout()只运行一次回调。
你从来没有告诉你的代码运行不止一次。

requestAnimationFrame()每次浏览器渲染一帧时，您都应该调用来运行动画。
然后，您将需要检查自上一帧以来已经过去了多少时间，并将动画更新适当的距离。

score 0 · Accepted Answer

我创建了最容易使用的 Web 组件来显示来自蓝牙心率监视器或外部 API 的数据。您需要做的就是调用bang()每一个出现的节拍。

document.body.innerHTML += '<ecg-line></ecg-line>';
ecgLine((bang) => setInterval(() => bang(), 1000));

源代码在这里发布。我认为它看起来比提出的替代品要好得多

javascript - 如何使用 HTML5 在画布中绘制心电图监视器？

4 回答 4

Related

Reference