js + canvas 实现签字板功能(签名支持下载到本地)_☆往事随風☆的博客

---

欢迎访问我的个人博客：https://wk-blog.vip

一、前言

使用 js + canvas 制作一个简易的签字板，支持签名下载到本地。类似于我们平常在网上签字的效果。

二、效果展示

点击在线试用(pc端)

三、设计思路

• 签字功能
  主要是利用了canvas中的绘制功能，为了能够实现绘制，我们需要获取到鼠标的按下时的坐标和移动偏移量。前者是绘制的起点，后者是绘制的线条。
• 下载功能
  首先创建一个 a 标签，然后将canvas转化为链接赋值给 a 标签的 href 属性，为 a 标签设置download属性，最后调用click()方法即可完成下载

四、代码示例

1.html代码示例

<canvas id="test" width="600" height="600">
        <span>您的浏览器不支持canvas属性</span>
    </canvas>

2.css代码示例

        html {
            background-color: black;
        }

        /* 设置画布样式 */
        #test {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #fff;
        }

        .title {
            width: 200px;
            margin: 0 auto;
            color: orangered;
            text-align: center;
            padding: 0.5rem 0;
            font-weight: 600;
            background: #fff;
        }

3.js代码示例

 window.onload = function(){
            // 获取画布
            var test = document.getElementById("test");
            // 检验支持性
            if(test.getContext){
                // 获取画笔
                var ctx = test.getContext("2d");
            }
            // 为画布绑定鼠标按下事件
            test.onmousedown = function(event){
                // 设置事件兼容
                event = event || window.event;
                //获取鼠标偏移量
                var X = event.clientX - test.offsetLeft;
                var Y = event.clientY - test.offsetTop;
                // 清空路径容器
                ctx.beginPath();
                // 画笔抬起
                ctx.moveTo(X,Y);
                // 绑定鼠标移动事件
                document.onmousemove = function(event){
                    event = event || window.event;
                    // 获取鼠标移动偏移量
                    var proX = event.clientX - test.offsetLeft;
                    var proY = event.clientY - test.offsetTop;
                    // 压栈
                    ctx.save();
                    // 设置样式
                    ctx.strokeStyle = "skyblue";
                    // 划线
                    ctx.lineTo(proX,proY);
                    ctx.stroke();
                    ctx.restore();
                };
                // 为画布绑定鼠标抬起事件
                document.onmouseup = function(event){
                    event = event || window.event;
                    // 取消鼠标移动事件
                    document.onmousemove = null;
                    // 取消鼠标抬起事件
                    document.onmouseup = null;
                };
                // 设置下载
                test.addEventListener('dblclick',() => {
                    let link = document.createElement('a');
                    link.href = test.toDataURL('image/png');
                    link.download = "sign.png";
                    link.click();
                },)
                return false;
            };
        };