Menu
I am try is to draw ecg system in using canvas html5.
Almost i am near to complete my wave is moving ,but not continuously it is repeating,But i want to draw the wave is move left to right continuously?
below link is example.
Ex:https://www.youtube.com/watch?v=wuwBfSpVEgw
i am getting y data every 1 sec.
Data Ex:
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,
];
Here is my code:
<!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>
269
asked Dec 21 '25 09:12
If you want to get it to look like the video, don't clear the frame at the end of each pass, just clear it to the right of the end of your path.
// 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);
Demo: http://jsfiddle.net/Shp4X/
Is that what you wanted?
75
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);
}
Demo:https://jsfiddle.net/majidagt/hc18mvbw/
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
