Javascript 如何使用HTML5在画布上绘制ecg监视器？_Javascript_Html_Canvas

Javascript 如何使用HTML5在画布上绘制ecg监视器？

javascript html canvas

Javascript 如何使用HTML5在画布上绘制ecg监视器？,javascript,html,canvas,Javascript,Html,Canvas,我正在尝试使用画布html5绘制心电图系统我几乎快完成了，我的波浪在移动，但不是不断地重复，而是我想画的波浪是不断地从左向右移动吗下面的链接是一个例子例：我每1秒获得一次y数据数据示例： 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,8

我正在尝试使用画布html5绘制心电图系统

我几乎快完成了，我的波浪在移动，但不是不断地重复，而是我想画的波浪是不断地从左向右移动吗

下面的链接是一个例子

例：

我每1秒获得一次y数据

数据示例：

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>


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#dbbd7a”；
ctx.fill（）；
var fps=60；
var n=1；
风险值数据=[
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（）；
函数drawWave（）{
setTimeout（函数（）{
请求动画帧（drawWave）；
ctx.lineWidth=“2”；
ctx.strokeStyle='绿色'；
//绘图代码在这里
n+=1；
如果（n>=数据长度）{
clearRect（0，0，canvas.width，canvas.height）；
n=1；
}
ctx.beginPath（）；
移动到（n-1，数据[n-1]）；
ctx.lineTo（n，数据[n]）；
ctx.stroke（）；
}，1000/帧）；
}

setTimeout（）

只运行其回调一次。
您从未让代码运行多次

您应该调用

requestAnimationFrame（）

，以便在浏览器每次渲染帧时运行动画。

然后，您需要检查自上一帧以来经过了多少时间，并按适当的距离更新动画。

如果要使其看起来像视频，不要在每次过程结束时清除帧，只需将其清除到路径末端的右侧即可

                // 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);

演示：

这就是你想要的吗

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);
 }

演示：

我创建了最容易使用的web组件，用于显示来自蓝牙心率监视器或外部api的数据。你所需要做的就是在每个出现的节拍上调用

bang（）

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

document.body.innerHTML+=''；
ecgLine（（bang）=>setInterval（（）=>bang（），1000））；

源代码已发布。我认为它看起来比提出的备选方案要好得多

我已经在使用相同的函数了。你能给我更清楚的答案吗？@purBin:你根本不应该调用

setTimeout（）

。我正在调用函数drawWave（）{setTimeout（function（）{requestAnimationFrame（drawWave））；在我的代码中检查一次…@purBin:requestAnimationFrame的全部要点是在每一帧上重新渲染。不要调用

setTimeout（）

@SLaks:setTimeout与requestAnimationFrame结合使用，将RAF限制在特定的帧速率。这种方法对于演示来说似乎是合理的，但是是的，真实世界的ecg应该使用时差来精确计算下一个X。您是否尝试调用

drawWave（）

递归？非常感谢。我有一个小小的疑问，那就是y数据是否每1秒出现一次，你能写些什么来帮助我吗？+1@BigBadaboom：你对刷新移动条做了很好的调整。对于OP：如果你想让你的演示每秒绘制一个新的y值，你可以将fps值从60更改为1（但这似乎有点慢。）最大fps是60，所以你需要每帧画大约2 Y，才能在60帧中完成140 Y。你可以做2Y、2Y、3Y（并重复此模式）这将给你每秒140个Y。好的，马克。如果每1秒从ajax调用Y值。如何绘制。你能给sample@markei吗？如果你每1秒得到一个140个Y值的数据包，不要麻烦制作结果的动画…只要立即显示所有140个，然后等待下一个数据包到达。