我需要在画布上绘制一个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图这样的图形.请帮我摆脱这个问题.
ECG的特征是绘制水平朝向空白间隙的信号.当到达右侧的末端时返回到左侧并且过度绘制现有图形.
建立
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
(外部循环).