如何使用HTML5在畫布中繪製心電圖監視器？

我嘗試繪製使用畫布html5的心電圖系統。如何使用HTML5在畫布中繪製心電圖監視器？

差不多我已經接近完成我的波動了，但並不是連續的重複着，但是我想畫出的波是從左向右移動的？

下面的鏈接是例子。

例：https://www.youtube.com/watch?v=wuwBfSpVEgw

我得到Y數據每1秒。

數據E：

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>

來源

2013-10-13 purBin

你嘗試過遞歸調用'drawWave（）'嗎？ – Amitd

setTimeout()只運行其回調一次。
你從來沒有告訴你的代碼運行多次。

您應該在每次瀏覽器渲染幀時調用requestAnimationFrame()來運行動畫。
然後，您需要檢查自上一幀以來經過了多少時間，並將動畫更新了適當的距離。

來源

2013-10-13 14:07:08 SLaks

我已經在使用相同的..你能給我答案更清楚嗎？ – purBin

@purBin：你根本不應該調用'setTimeout（）'。 – SLaks

我正在調用函數drawWave（）{ setTimeout（function（）{ requestAnimationFrame（drawWave）;在我的代碼中檢查一次... – purBin

如果您想讓它看起來像視頻，請不要在每次通過結束時清除幀，只需將其清除到路徑末尾的右側即可。

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

演示：http://jsfiddle.net/Shp4X/

這是你想要的嗎？

來源

2013-10-13 14:54:36

感謝Big.Here是我的小小懷疑，如果y數據每1秒鐘出現一次，怎麼寫可以請你幫我一下？ – purBin

+1 @BigBadaboom：你做了一個很好的調整對於OP：如果你想讓演示每秒鐘繪製一個新的Y值，你可以將fps值從60改爲1 （但這看起來很慢） – markE

@markE：情節1的意思。總共ydata數組每1秒得到一次 – purBin

如何使用HTML5在畫布中繪製心電圖監視器？

回答

相關問題