移动端使用源生写法编写签字板

前端时间给大家介绍了通过vue在PC页面上制作签字版，今天给大家介绍移动端签字板的源生写法。

插件链接：https://jsfiddle.net/szimek/jq9cyzuc/

先给大家看下效果图：

image.png

样式写的有点简陋，这里主要展示功能的实现。接下来展示代码：

<div class="shade">
            <span class="cancel"><a href="./contract_sign.html">取消</a></span>
            <div class="title">绘制签名</div>
            <div class="text">请用手指在虚线框中绘制签名</div>
            <canvas id="signature-pad" class="signature-pad"></canvas>
            <div class="btn">
                <a href="./contract_sign.html"><button id="draw"><i><img src="../../img/fxq-determine.svg" alt="" /></i>确定</button></a>
                <button id="clear"><i><img src="../../img/fxq-remove.svg" alt="" /></i>清空</button>
            </div>
        </div>

下面是css代码，由于是在手机上横屏展示的原因，所以用到了大量的css3旋转属性

.shade{
                width: 100%;
                height: 100%;
                padding-top: 20pt;
                padding-bottom: 19pt;
                text-align: center;
                position: relative;
                background-color: #fff;
            }
            .shade .cancel{
                display: inline-block;
                transform: rotate(-90deg);
                position: absolute;
                bottom:20pt;
                left:6pt;
                font-size: 14pt;
                color:#0168F4;
            }
            .shade .title{
                color:#333333;
                font-size: 16pt;
                transform: rotate(-90deg);
                position: absolute;
                top:50%;
                margin-top: -20pt;
                left:-18pt;
            }
            .shade .text{
                color:#999999;
                font-size: 12pt;
                transform: rotate(-90deg);
                position: absolute;
                top:50%;
                margin-top: -20pt;
                left:-42pt;
            }
            .shade .signature-pad{
                width: 56%;
                height: 100%;
                border:1px dashed #CCCCCC;
            }
            .shade .btn {
                width: 50pt;
                height: 260pt;
                position: absolute;
                right:16pt;
                top:50%;
                margin-top: -130pt;
            }
            .shade .btn button{
                transform: rotate(-90deg);
                font-size: 12pt;
                width: 80pt;
                height: 34pt;
                padding: 0;
                position: absolute;
                padding-right: 10pt;
            }
            .shade .btn button img{
                width: 32pt;
                height: 32pt;
                vertical-align:middle;
            }
            .shade .btn #draw{
                bottom:0;
                left:0;
            }
            .shade .btn #clear{
                top:0;
                left:0;
            }

最后是实现功能的js代码：

var canvas = document.getElementById("signature-pad");
            function resizeCanvas() {
                var ratio =  Math.max(window.devicePixelRatio || 1, 1);
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }
            window.onresize = resizeCanvas;
            resizeCanvas();
            var signaturePad = new SignaturePad(canvas, {
              backgroundColor: 'rgb(255, 255, 255)' 
            });
            document.getElementById('clear').addEventListener('click', function () {
              signaturePad.clear();
            });

API

// Draws signature image from data URL
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Clears the canvas
signaturePad.clear();

// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();

// Unbinds all event handlers
signaturePad.off();

// Rebinds all event handlers
signaturePad.on();

这里只做了一个清除的功能，其实还有许多可以做的功能，例如开始绘画功能，橡皮擦功能。如有需要请在评论下方留言，吾定会第一时间，为卿解答，喜欢的请加关注哦亲亲。

qinqin.gif