【js实现手写签名板】canvas

项目多个功能模块都用到签名，所以进行了封装，需要用到的签名的地方，只需要调用一下封好的signature函数，即可返回保存的签名照片（格式：base64，也可自行修改）

<!-- 项目的html页面 -->
<style>
        .popverBox{
     
            position: relative;
            height: 500px;
        }
        .signSure{
     
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            background: #fff;
            border-radius: 16px;
            padding: 20px 12px 28px 12px;
        }
        .topTitle{
     
            margin: 20px 0 12px 12px;
            font-size: 16px;
        }
        .whiteBord{
     
            width: 300px;
            height: 400px;
            border: 1px solid #eee;
            background: #f6f6f6;
            background: #f6f6f6;
            margin: 0 auto;
            border-radius: 4px;
            margin-bottom: 12px;
        }
        .bottomBtnBox{
     
            padding: 0 7px;
            display: flex;
            justify-content: space-between;
        }
        .primaryBtn{
     
            width: 48%;
            height: 40px;
            color: #666;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: #fff;
        }
        .activeBtn{
     
            background: #315294;
            color: #fff;
            border: none;
        }
</style>
<div class="popverBox">
        <div id="signSure" class="signSure">
            <div class="topTitle">请写下您的名字</div>