基于Vue3+Canvas实现跨设备签名板（移动端/PC双适配）

原创

已于 2025-03-05 11:56:32 修改 · 912 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-03-05 11:22:19 首次发布

签名板演示

注：笔画有黑色效果是录制缺帧导致，实际不会哈。

本签名板支持以下核心功能：

鼠标/触摸双模式绘制
实时笔迹渲染
画布自适应屏幕
作品保存为PNG
一键清空画布

应用场景：

电子签约：合同签署场景合规解决方案
教学白板：在线教育手写批注功能
身份认证：银行开户手写签名采集
艺术创作：移动端数字绘画工具

一、项目结构

我们在Vue3项目下添加的所以，可以根据自己的目录结构去写，这里做一个示例

src/
├── components/
│   └── SignatureBoard.vue  # 签名板组件
└── views/
    └── DemoPage.vue        # 示例页面

二、核心实现原理

2.1 Canvas初始化

function initCanvas() {
    const canvas = canvasRef.value;
    canvas.width = 500;
    canvas.height = 300;
    ctx.value = canvas.getContext('2d');
    
    // 笔触样式配置
    ctx.value.lineWidth = 3;
    ctx.value.strokeStyle = 'red';
    ctx.value.lineCap = 'round';  // 圆形笔头
    ctx.value.lineJoin = 'round'; // 平滑连接
}

关键配置说明：

lineCap：控制线条端点形状（butt|round|square）
lineJoin：控制线条交汇处形状（bevel|round|miter）

2.2 坐标转换算法

function getCanvasCoordinates(event) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / canvas.offsetWidth; // CSS缩放因子
    const scaleY = canvas.height / canvas.offsetHeight;
    
    // 多设备坐标获取
    const clientX = mobileStatus.value ? 
        event.touches[0].clientX : event.clientX;
    const clientY = mobileStatus.value ? 
        event.touches[0].clientY : event.clientY;

    return {
        x: (clientX - rect.left) * scaleX,
        y: (clientY - rect.top) * scaleY
    };
}

坐标转换必要性：解决Canvas物理像素与CSS像素的差异，避免高分屏下的绘制偏差。