--- theme: juejin highlight: a11y-dark --- # 🔍前言 > 现在`面试场景题`会比较多。一上来可能就给我们搞这些场景题。\ > 今日阳光明媚，我们去面试。\ > 面试官叫口头讲一下`电子签名`这个实现思路。\ > 有些可能线上面，叫`共享屏幕手写`一下，不能使用搜索引擎啥的。现在很多时候，我们会碰到，线上的网站或者小程序那些，`脸部识别`、`电子签名`那些。 # ☕正文 ### 🔴 canvas #### 流程 **`流程`**：\ (html部分) \ 1、页面写`canvas`元素，根据不同端写不同的`事件`。 (js部分) \ 2、创`canvas`，做`画布`。\ 3、用`canvas`的一些`api`去搞。 #### api `canvas`画东西的普遍要知道的一些`api`: `beginPath`。\ `moveTo`。\ `lineTo`。\ `stroke`。\ `clearRect`。\ `toDataURL`。 * `beginPath`：开始创建新路径。 ```js // 获取canvas元素 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制开始 ctx.beginPath(); // 做个矩形 ctx.rect(20, 20, 150, 100); // 绘制路径 ctx.stroke() ``` * `moveTo`：移动画笔。 * `lineTo`：画线。告诉画笔从当前位置画一条直线到指定的位置。 * `stroke`：绘制。画三角形。 ```js // 获取canvas元素 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 绘制开始 ctx.beginPath(); // 移动画笔 ctx.moveTo(100, 100); // 搞两个点 ctx.lineTo(200, 100); ctx.lineTo(150, 50); // 填充颜色 ctx.fillStyle = 'red' // 填充路径 ctx.fill() ``` * `clearRect`：清空画布。 * `toDataURL`：画布内容转`base64`格式的图片。 #### 不同端分 **`不同端`**: \ `pc`,\ `移动端`。 #### 事件 `pc`的鼠标🖱事件： `mousedown`：按下.\ `mousemove`：移动。\ `mouseup`：抬起。\ `mouseleave`：离开。 `移动端`的触摸✋事件： `touchstart`：开始。\ `touchmove`：移动。\ `touchend`：结束。 ### 🔴 代码 #### 电子签名用`vue3`写的。 ```js ``` ```js ``` ![111.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dbad9cbc380043aaa252a608eb178fde~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1763105034&x-signature=cHeGK6q4L3l5v5%2FfHAAPwlp1QV4%3D) #### 你画我猜 `你画我猜`。差不多也是这么一个原理。差别就是`多人`（两个或两个以上）。\ 那么对方要看到我画的。要一个桥梁实时把我的数据展示给对方。\ 这个桥梁用`websocket`做。 `后端`：nodejs。\ 这里多人你画我猜，我用两人例子来讲。 * `nodejs`去做做桥梁。`分发`对方的数据给对方，从而实现同步对方的画给对方。 `前端`： * 比上面签名的例子，后端给`关键词`分发给两人。需同步。 * 画布的内容。需同步。服务器：用`ws`库。 ```js const WebSocketServer = require('ws').Server; const wss = new WebSocketServer({ port: 8081 }); const wordArr = ['苹果', '香蕉', '西瓜']; wss.on('connection', () => { console.log('连接了'); // 随机生成一个词 let keyWord = (v => wordArr[Math.floor(Math.random() * wordArr.length)])(); // 监听消息 ws.on('message', msg => { if (msg === keyWord) { console.log('猜对了'); } else { // 不对则广播坐标去同步 wss.clients.forEach(ws => { ws.send(msg); }); } }) // 发题 wss.clients.forEach(ws => { ws.send(keyWord); }); }); ``` 画的时候，坐标发送给服务器那端。\ 然后服务器收到之后。通过分发给对方。这里有两个客户端，分别为：A 和 B。 **思路** `A`画的同时，所有坐标移动一点就通过`ws.send`发给`B`。\ `B`收到之后，画出来就可以了。通过`你画我猜`这个案例。做了 1、`websocket`实时通信； 2、`canvas`的实践。实现了互动小游戏的开发。 ![222.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f9f4e825b0614cd498cd2733a43bf273~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1763105034&x-signature=tzZmkDKzNnwXdVZY7oE4PKeyf8E%3D) # 🥤总结这篇文。说了`电子签名`和`你画我猜`这种搞`canvas`的小玩意。同时还提到`websocket`这种实时通信的实现。写下来看一眼回头有个印象，人问咱也不怵。跟押题似的。 ![未命名.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b5611fe0ae284611b408e161902d3e08~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55uP54Gv:q75.awebp?rk3s=f64ab15b&x-expires=1763105034&x-signature=UZuyvGc79H6SyVs51mAKcIW6%2B5k%3D) > ☎️ 希望对大家有所帮助，本文有些地方可能考虑不够周到，有些纰漏，就当抛砖引玉，还望您海涵，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读，祝您开发有乐趣。