javascript - ctx.fillText 不绘制连接

Question

出于某种原因，当客户端连接到服务器时，ctx.fillText 不想绘制任何内容。控制台正在正确记录所有内容，因此该功能可以正常工作，但 Canvas 有点愚蠢。

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

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>

Answer 1

ctx.fillText 根据当前 textBaseline 定位文本、字体、文本对齐和方向值。

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