如何为所有连接的客户端清除画布？答案

【问题标题】：How to clear canvas for all connected clients?如何为所有连接的客户端清除画布？
【发布时间】：2019-08-17 06:01:51
【问题描述】：

我打算在我的网站中集成一个白板画布，通过 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();
}

【问题讨论】：

标签： javascript node.js canvas socket.io

【解决方案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);

【讨论】：

我们在哪里添加这个？