3

私はcanvas html5を使用してecgシステムを描画しようとしています。

ほぼ完了に近づいていますが、波が動いていますが、連続して繰り返されているわけではありませんが、波を描きたいのですが、左から右に連続的に移動していますか?

以下のリンクは例です。

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

私は1秒ごとにyデータを取得しています。

データ例:

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>
4

4 に答える 4

5

ビデオのように見せたい場合は、各パスの最後にあるフレームをクリアしないでください。パスの終わりの右側だけをクリアしてください。

                // 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-13T14:54:36.170 に答える
0

setTimeout()コールバックを 1 回だけ実行します。
コードを複数回実行するように指示したことはありません。

requestAnimationFrame()ブラウザがフレームをレンダリングするたびに、アニメーションを実行するために呼び出す必要があります。
次に、前のフレームから経過した時間を確認し、適切な距離だけアニメーションを更新する必要があります。

于 2013-10-13T14:07:08.717 に答える
0

Bluetooth 心拍数モニターまたは外部 API からのデータを表示するための最も使いやすい Web コンポーネントを作成しました。あなたがする必要があるのはbang()、出現するすべてのビートを呼び出すことだけです。

document.body.innerHTML += '<ecg-line></ecg-line>';
ecgLine((bang) => setInterval(() => bang(), 1000));

ソースコードはこちらで公開されています。提示された代替案よりもはるかに優れていると思います

ここに画像の説明を入力

于 2020-09-06T15:16:03.810 に答える