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

Posted 2023-02-16

【中文标题】如何在 canvas html5 中渲染 Socket 数据？

【英文标题】：How to rendering Socket data in canvas html5?

【发布时间】：2013-10-29 13:57:56

【问题描述】：

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

使用常量数据绘制画布。

当我从没有像上面那样渲染的套接字获取数据时

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

【参考方案1】：

我认为；你的数据数组应该在'drawWave'方法之外作为你的小提琴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);
        

    

【讨论】：

使用我的代码当套接字结果即将画布完美绘制时，但这就像我的小提琴示例一样呈现。