🔍前言

现在面试场景题会比较多。一上来可能就给我们搞这些场景题。

今日阳光明媚，我们去面试。

面试官叫口头讲一下电子签名这个实现思路。

有些可能线上面，叫共享屏幕手写一下，不能使用搜索引擎啥的。

现在很多时候，我们会碰到，线上的网站或者小程序那些，脸部识别、电子签名那些。

☕正文

🔴 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 复制代码

<template>
    <canvas
        @mousedown="handleMouseDown"
        @mousemove="handleMouseMove"
        @mouseup="handleMouseUp"
        @mouseleave="handleMouseUp"
    >
    </canvas>
    
    <button @click="clearSignature">清空签名</button>
    <button @click="saveSignature">保存签名</button>
    
</template>

js 复制代码

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const canvasRef = ref<HTMLCanvasElement | null>()
const isDrawing = ref(false) // 是否正在绘制
const ctx = ref<CanvasRenderingContext2D | null>()

onMounted(() => {
  const canvas = canvasRef.value
  if(canvas) {
    ctx.value = canvas.getContext('2d')
    if (ctx.value) { // 定制笔
      ctx.value.strokeStyle = 'black'; // 签名的笔的颜色
      ctx.value.lineWidth = 2; // 字体
    }
  }
})

const handleMouseDown = (e: MouseEvent) => {
  isDrawing.value = true
  if (ctx.value) {
    ctx.value.beginPath()
    ctx.value.moveTo(e.offsetX, e.offsetY)
  }
}

const handleMouseMove = (e: MouseEvent) => {
  if (isDrawing.value && ctx.value) {
    ctx.value.lineTo(e.offsetX, e.offsetY) // 画线
    ctx.value.stroke() // 绘制
  }
}

const handleMouseUp = () => {
  isDrawing.value = false // 停止绘制
}

const clearSignature = () => {
  if (ctx.value) {
    ctx.value.clearRect(0, 0, canvasRef.value!.width, canvasRef.value!.height)
  }
}

const saveSignature = () => {
  if (ctx.value) {
    const dataUrl = canvasRef.value!.toDataURL()
    console.log(dataUrl)
  }
}
</script>

你画我猜

你画我猜。差不多也是这么一个原理。差别就是多人（两个或两个以上）。

那么对方要看到我画的。要一个桥梁实时把我的数据展示给对方。

这个桥梁用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的实践。实现了互动小游戏的开发。

🥤总结

这篇文。说了电子签名和你画我猜这种搞canvas的小玩意。同时还提到websocket这种实时通信的实现。写下来看一眼回头有个印象，人问咱也不怵。跟押题似的。

☎️ 希望对大家有所帮助，本文有些地方可能考虑不够周到，有些纰漏，就当抛砖引玉，还望您海涵，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读，祝您开发有乐趣。

前端开发，场景题：讲一下如何实现 ✍电子签名、🎨你画我猜？

🔍前言

☕正文

🔴 canvas

流程

api

不同端

事件

🔴 代码

电子签名

你画我猜

🥤总结