ctx.fillText 不会在连接时绘制

ctx.fillText does not draw on connection

本文关键字：连接 绘制 fillText ctx      更新时间：2023-09-26

出于某种原因，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根据

当前文本基线、字体、文本对齐和方向值定位文本。

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

相关文章：