Question

由于某种原因，当客户端连接到服务器时，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>

Answer 1

ctx.fillText根据当前textBaseline，字体，textAlign和方向值定位文字。

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

ctx.fillText不会在连接上绘制

1 个答案: