javascript - キャンバスhtml5でソケットデータをレンダリングするには?

Question

1)キャンバスhtml5でソケットデータをレンダリングする方法は?

定数データを使用してキャンバスをレンダリングします。

上記のようにレンダリングされていないソケットからデータを取得しているとき

1) 上記の例と同じように 10 秒ごとにソケット データが送信される

Answer 1

おもう; データ配列は、フィドルの例として「drawWave」メソッドの外にある必要があり、「socket.on」で「drawWave」メソッドを1回だけ呼び出す必要があります。「drawWave」の呼び出し後。「drawWave」ではなく、「socket.on」でデータ配列を変更する必要があります。

それを試していただけますか？

    var data = [];
    var drawWaveCaught=false;
    socket.on('canvasData', function (incomeData) {
        console.log(incomeData);
        data = JSON.parse("[" + incomeData + "]");
        if(!drawWaveCaught){
            drawWaveCaught = true;
            that.drawWave(); 

        } 
    });
function drawWave() {
        requestAnimFrame(drawWave);
        var n = 0;
        var canvas = document.getElementById('canvas');
        //alert(id);
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#dbbd7a";
        ctx.fill();

        ctx.lineWidth = "2";
        ctx.strokeStyle = 'green';
        // Drawing code goes here
        for(n=1;n<=data.length;n++)
        {
            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);
        }

    }