不用懂代码，新手也可以使用Trae实现一个电子签名

你是不是经常遇到一些银行页面在同意条款之后就需要手写签名，是不是好奇前端是怎么来实现的电子签名。

今天就让Trae来帮我们揭秘这个电子签名是怎么实现的，以及帮我们捋清楚，要完成哪些功能以及注意事项，让我们的电子签名完美的运行

先来看看最终的效果，最上面是canvas的签名区，可以清除、撤销、调整笔画的颜色和粗细，点击确定之后就会生成图片，用户可以选择是否下载，还会在本地生成历史的签名方便其他场景复用~

看看Trae使用的是啥技术栈，index.html中使用的是canvas，以及引入一个第三方的依赖库来实现电子签名的

首先先让Trae创建一个文件来存放电子签名的代码，后续部署可以直接使用这个文件夹部署到nginx上面

我们只是简单的一句话，Trae就非常专业的帮我们考虑到样式以及生成图片等核心功能，为了方便新手用户，还特意写了说明文档，并且启动了项目

第一版，我去使用了，发现鼠标和笔画对不上，笔画在鼠标下面，这个用户体验真的很糟糕，所以我让Trae进行了优化，我们拭目以待，看看Trae有没有能力把这个问题给解决掉

Trae马上识别到了问题的存在的关键，并进行了优化，以下是Trae的优化

首先是改进了SignaturePad的初始化配置

然后重写了Canvas大小调整函数

js 复制代码

function resizeCanvas() {
    // 获取设备像素比
    const ratio = Math.max(window.devicePixelRatio || 1, 1);
    const container = canvas.parentElement;
    
    // 保存当前的绘图数据（如果有）
    let data = null;
    if (!signaturePad.isEmpty()) {
        data = signaturePad.toData();
    }
    
    // 设置canvas的显示大小（CSS像素）
    canvas.style.width = container.offsetWidth + 'px';
    canvas.style.height = '300px';
    
    // 设置canvas的实际大小（物理像素）
    canvas.width = container.offsetWidth * ratio;
    canvas.height = 300 * ratio;
    
    // 调整canvas的坐标系统
    const ctx = canvas.getContext('2d');
    ctx.scale(ratio, ratio);
    
    // 清除签名并恢复数据（如果有）
    signaturePad.clear();
    if (data) {
        signaturePad.fromData(data);
    }
}

添加了SignaturePad重新绑定函数

php 复制代码

function rebindSignaturePad() {
    // 解除当前的SignaturePad实例
    signaturePad.off();
    
    // 重新创建SignaturePad实例
    signaturePad = new SignaturePad(canvas, {
        minWidth: penSize.value / 2,
        maxWidth: penSize.value * 2,
        penColor: penColor.value,
        backgroundColor: 'rgba(255, 255, 255, 0)',
        velocityFilterWeight: 0.7,
        throttle: 16,
        dotSize: function() {
            return (this.minWidth + this.maxWidth) / 2;
        }
    });
    
    // 重新绑定endStroke事件
    signaturePad.addEventListener('endStroke', () => {
        saveDrawState();
    });
}

在关键时刻重新绑定SignaturePad

窗口大小改变时
画笔颜色改变时
画笔大小改变时
初始化时

最终Trae定位到的原因是设备像素比处理：正确处理了高DPI屏幕（如Retina显示器）上的像素比例，确保物理像素和CSS像素的正确映射

手动再次书写，没有问题，试一下移动端也是可以完美的签名，本次的电子签名就完成了，不到五分钟，很好，推荐大家来试试Trae