javascript - 如何在 canvas html5 中渲染 Socket 数据？

Question

1）如何在canvas html5中渲染Socket数据？

使用常量数据绘制画布。

当我从套接字获取的数据不像上面那样

1) 每 10 秒套接字数据与上述示例相同

Answer 1

我认为; 你的数据数组应该在'drawWave'方法之外作为你的小提琴前，你应该在'socket.on'中调用'drawWave'方法一次。在调用“drawWave”之后。你应该在 'socket.on' 改变你的数据数组，而不是在 'drawWave'。

你能试试吗？

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

    }