如何使用HTML5绘制ecg监视器在画布？ [英] How to draw ecg monitor in canvas using HTML5?
本文介绍了如何使用HTML5绘制ecg监视器在画布？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试使用canvas html5绘制ecg系统。
我几乎完成我的波动是移动，但不是连续地重复，但是我想画波浪是从左到右连续移动？
下面的链接是示例。
https://www.youtube.com/watch?v=wuwBfSpvegw
数据例：
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-Typecontent =text / html; charset = UTF-8>
< / head>
< body>
< canvas id =canvaswidth =160height =160style =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';
//绘图代码到这里
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 /
}
< / script>
< / body>
< / html>
解决方案
如果你想让它看起来像视频，不要在每遍结束时清除框架，只要将其清除到路径末端的右边即可。
//绘图代码到这里
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/
这是你想要的吗？
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>
解决方案
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?
这篇关于如何使用HTML5绘制ecg监视器在画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
