Javascript 如何在画布html5中呈现套接字数据？

1如何在画布html5中呈现套接字数据

使用常量数据绘制画布

当我从套接字获取数据时，它不会像上面那个样呈现

---

我认为每10秒就会有1个套接字数据像上面的示例一样出现

；您的数据数组应该在“drawWave”方法之外，就像您的fiddle ex一样，您应该在“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);
        }

    }

---

使用我的代码时，套接字结果绘制得非常完美，但这就像我的小提琴示例一样。