Canvas场景下校验用户绘制图形与原始图形是否一致的方案咨询

你不用完全从零手写逐点坐标比对，有两种成熟的落地思路可选：

• 像素级比对（优先推荐，适配你的活动场景）
  你可以准备两个相同尺寸的离屏canvas，分别绘制原始标准图形和用户打点生成的图形，调用canvas原生的getImageData()接口获取两个画布的像素数据，直接统计原始图形像素区域和用户绘制区域的重合度即可。
  这种方案的优势是完全不用处理用户打点的顺序、微小位移误差，还可以自由调整容错阈值，比如重合度达到85%-90%就算挑战成功，非常适配手动打点的使用场景，不需要引入任何第三方依赖。
  核心实现代码示例：

  // 原始图形和用户图形都使用相同宽高的canvas绘制
  const CANVAS_WIDTH = 300;
  const CANVAS_HEIGHT = 300;
  // 获取像素数据，返回的数组每个像素占4位，分别对应r/g/b/a值
  const originalPixel = originalCtx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
  const userPixel = userCtx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
  
  let matched = 0;
  let totalValid = 0;
  // 遍历所有像素，只统计原始图形有绘制的区域
  for (let i = 0; i < originalPixel.length; i += 4) {
    // 原始像素透明度大于0说明是图形绘制区域
    if (originalPixel[i + 3] > 0) {
      totalValid++;
      // 用户对应位置的像素有绘制就算匹配
      if (userPixel[i + 3] > 120) {
        matched++;
      }
    }
  }
  // 匹配度超过88%判定获胜，阈值可根据活动难度调整
  const isPass = (matched / totalValid) >= 0.88;
  

• 几何路径比对（适合需要支持缩放/平移画布的场景）
  如果你的活动允许用户缩放、移动画布后绘制，可以基于几何特征做比对：比如计算两个多边形的交并比（IOU）、或者用弗雷歇距离计算两条路径的相似度，相关的几何计算逻辑都有成熟的JS工具库可以直接调用，不需要自己手写坐标计算逻辑。

内容的提问来源于stack exchange，提问作者uncle bob