带有html5画布的Ecg图

Question

我需要在画布上绘制一个ECG图,用于每次数据迭代的套接字数据.

我试图查看几个使用画布绘制图形的图形插件,尝试http://www.flotcharts.org/但没有成功.

我试图用下面的基本html5画布画线绘制图表和样本数据.

var fps = 60;
var n = 1;

drawWave();
    function drawWave() {
        setTimeout(function() {
                requestAnimationFrame(drawWave2);
                ctx.lineWidth = "2";
                ctx.strokeStyle = 'green';
                // Drawing code goes here
                n += 1;
                if (n >= data.length) {
                    n = 1;
                }
                ctx.beginPath();
                ctx.moveTo(n - 1, data[n - 1] * 2);
                ctx.lineTo(n, data[n] * 2);
                ctx.stroke();
                ctx.clearRect(n + 1, 0, 10, canvas.height);
            }, 1000 / fps);
    }

但它没有给我一个精确的图形视图作为附加图像.我无法理解如何实现像ecg图这样的图形.请帮我摆脱这个问题.

Answer 1

ECG的特征是绘制水平朝向空白间隙的信号.当到达右侧的末端时返回到左侧并且过度绘制现有图形.

DEMO

建立

var ctx = demo.getContext('2d'),
    w = demo.width,
    h = demo.height,

    /// plot x and y, old plot x and y, speed and scan bar width
    speed = 3,
    px = 0, opx = 0, 
    py = h * 0.8, opy = py,
    scanBarWidth = 20;

ctx.strokeStyle = '#00bd00';
ctx.lineWidth = 3;

/// for demo we use mouse as signal input source    
demo.onmousemove = function(e) {
    var r = demo.getBoundingClientRect();
    py = e.clientY - r.top;
}
loop();

主循环:

该循环将绘制任何时刻信号幅度的任何信号.您可以通过Web插座等注入窦或其他信号或从实际传感器读取.

function loop() {

    /// move forward at defined speed
    px += speed;

    /// clear ahead (scan bar)
    ctx.clearRect(px,0, scanBarWidth, h);

    /// draw line from old plot point to new
    ctx.beginPath();
    ctx.moveTo(opx, opy);
    ctx.lineTo(px, py);
    ctx.stroke();

    /// update old plot point
    opx = px;
    opy = py;

    /// check if edge is reached and reset position
    if (opx > w) {
        px = opx = -speed;
    }

    requestAnimationFrame(loop);
}

注入一个值只需更新py(外部循环).