javascript - ctx.fillText不会在连接上绘制

由于某些原因，当客户端连接到服务器时，ctx.fillText绝对不想绘制任何内容。控制台可以正确记录所有内容，因此该功能可以正常工作，但是画布有点傻。

这是服务器端代码的一部分：

io.sockets.on('connection', function(socket){

  socket.id = Math.random();
  SOCKET_LIST[socket.id] = socket;

  console.log(":: Client Connected -- " + Date());
});

setInterval(function(){

 for(var i in SOCKET_LIST){
    var socket = SOCKET_LIST[i];

    socket.emit('PlayerID', {
        id: socket.id
    });
 }

}, 1000/25);

和客户端：

<canvas id="ctx" width="800" height="500" style="border: 1px solid #000;"></canvas>

<script type="text/javascript">
    var socket = io();

    var ctx = document.getElementById("ctx").getContext("2d");


    socket.on('PlayerID', function(data){
        ctx.clearRect(0, 0, 800, 500);
        ctx.fillText('Client', 0, 0); // (data.id.toString(), 0, 0)
        console.log(data.id);
    });
</script>

最佳答案

ctx.fillText根据当前的textBaseline，字体，textAlign和direction值来定位文本。

fillText( txt, 0, 0)默认情况下将非降序文本放置在画布上方。插入ctx.textBaseline = "top";和/或增加传递给fillText的调用中传递的y坐标值可用于重新定位文本以使其可见。

关于javascript - ctx.fillText不会在连接上绘制，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36119927/