javascript - 如何清除所有连接客户端的画布？

Question

我打算在我的网站中集成一个白板画布，通过 Socket.io 连接到 NodeJS 服务器的用户可以在屏幕上协作绘制。从一个客户端绘图会发送到其他客户端的屏幕。出于演示目的，我使用 localhost。

唯一的问题是，当我集成清除功能时，它仅从当前用户的屏幕/画布中清除，但并非所有客户端都受到影响。

我相当新，我不太了解发射和广播的工作原理，但我尝试通过 socket.emit 进行发射，它传递了一个明确的函数，该函数向所有客户端广播。

<button type="button" onclick="clearCanvas()" id="btnClear">CLEAR</button>

function clearCanvas(){ 
context.clearRect(0, 0, canvas.width, canvas.height)
socket.emit('clear'), clearCanvas();
}

标签： javascriptnode.jscanvassocket.io

Answer 1

你需要处理clear事件。

<button type="button" onclick="emitAndCanvas()" id="btnClear">CLEAR</button>

function emitAndCanvas(){ 
   socket.emit('clear');
   clearCanvas();
}

function clearCanvas() {
   context.clearRect(0, 0, canvas.width, canvas.height); 
}

// this will handle the socket event and clears the canvas
socket.on('clear', clearCanvas);