如何在canvas html5中渲染套接字数据？ [英] How to rendering Socket data in canvas html5?

问题描述

1）如何在canvas html5中渲染套接字数据？

使用常量数据渲染canvas。

当我从套接字中获取数据时，不会像上面那样渲染数据

1）套接字数据像上面例子中每10秒一样变化

解决方案

我想;你的数据数组应该在'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（）; 
 
 
}）; 
函数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'; 
 //绘图代码在这里
（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）; 
} 
 
} 
  

1) How to rendering Socket data in canvas html5?

Using constant data i rending canvas.

When i am getting data from socket that is not rending like above one

1) socket data coming like same above example every 10 seconds

解决方案

I think; your data array should be outside of 'drawWave' method as your fiddle ex and you should call 'drawWave' method just once in 'socket.on'. After a call of 'drawWave'. you should change your data array at 'socket.on' , not at 'drawWave'.

Could you try that?

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

    }

这篇关于如何在canvas html5中渲染套接字数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！