---

在线教育场景下，Canvas 白板的实时同步与高性能渲染一直是开发者面临的难题。今天我们就从技术选型到核心实现，一步步拆解如何构建一个稳定高效的在线教育白板系统。

1. 背景与核心挑战

在线教育白板不同于普通绘图工具，它有几个特殊要求：

• 低延迟笔迹同步：学生需要实时看到老师的板书，延迟超过200ms就会明显感知卡顿
• 多人并发编辑：当多个学生同时标注时，需要解决操作冲突问题
• 跨端一致性：在不同设备、不同浏览器上，Canvas渲染结果要保持一致
• 性能优化：长时间使用不卡顿，内存占用合理

2. 技术选型：同步方案对比

我们主要比较两种主流方案：

1. WebSocket长连接
2. 优点：服务端可控性强，适合教育场景的权限管理

3. 缺点：需要额外服务器成本

4. WebRTC点对点

5. 优点：延迟更低，适合小范围协作
6. 缺点：NAT穿透复杂，不适合大规模课堂

最终选择：教育场景通常选用WebSocket，因为：

• 需要严格的权限控制（如仅老师可以擦除内容）
• 需要记录完整的操作日志用于回放
• 课堂规模通常较大（50+人）

3. 核心架构设计

采用三层架构：

// 网络层：处理WebSocket连接
class NetworkLayer {
  private ws: WebSocket;
  // ...连接管理代码
}

// 协议层：处理操作转换
class OTProtocol {
  applyOperation(op: Operation): Operation[] {
    // OT算法实现
  }
}

// 渲染层：Canvas绘制
class Renderer {
  private canvas: HTMLCanvasElement;
  draw(op: Operation): void {
    // 使用脏矩形优化
    this._drawDirtyRect(op);
  }
}

4. 关键代码实现

OT算法核心（TypeScript实现）

/**
 * 操作转换核心算法
 * @param localOp 本地操作
 * @param remoteOp 远程操作
 * @returns 转换后的可应用操作
 */
function transformOperation(
  localOp: Operation,
  remoteOp: Operation
): Operation {
  // 处理插入冲突
  if (localOp.type === 'INSERT' && remoteOp.type === 'INSERT') {
    if (localOp.pos < remoteOp.pos) {
      return { ...remoteOp, pos: remoteOp.pos + localOp.text.length };
    }
    // ...其他转换规则
  }
  // ...其他操作类型处理
}

脏矩形优化渲染

class Renderer {
  private lastDirtyRect: DOMRect | null = null;

  /**
   * 只重绘受影响区域
   */
  private _drawDirtyRect(op: Operation) {
    const dirtyRect = this._calculateDirtyRect(op);
    ctx.save();
    ctx.beginPath();
    ctx.rect(dirtyRect.x, dirtyRect.y, dirtyRect.width, dirtyRect.height);
    ctx.clip();
    // ...执行实际绘制
    ctx.restore();
  }
}

5. 生产环境注意事项

内存泄漏预防

• 及时移除Canvas的事件监听器
• 使用WeakMap存储临时对象
• 定期检查离屏Canvas的释放

iOS特殊处理

// 处理iOS手势冲突
canvas.style.touchAction = 'none';
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  // 手动计算正确坐标
  const rect = canvas.getBoundingClientRect();
  const x = e.touches[0].clientX - rect.left;
  const y = e.touches[0].clientY - rect.top;
  // ...处理绘制
}, { passive: false });

6. 测试与优化

我们模拟了不同网络条件下的表现：

| 网络条件 | 平均延迟 | 数据包丢失率 | |----------|---------|-------------| | 4G良好 | 150ms | <1% | | 弱WiFi | 300ms | 5% | | 3G网络 | 800ms | 15% |

优化建议：

• 在弱网环境下自动降低同步频率
• 实现操作压缩（多个操作合并为一个）
• 添加本地预测渲染

实验与延伸

我创建了一个模拟环境供大家测试不同算法表现： GitHub仓库：canvas-sync-simulation

可以通过修改src/algorithm.ts切换OT和CRDT算法，使用Chrome的Network Throttling模拟不同网络条件。

希望这篇实战总结对你有帮助！如果有任何问题，欢迎在评论区交流讨论。