jquery实现手写签名

最新推荐文章于 2021-02-01 09:13:52 发布

艾呀艾

最新推荐文章于 2021-02-01 09:13:52 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42027503/article/details/109859124

版权

本文介绍如何利用jQuery和相关资源实现手写签名的功能。通过CSS布局，HTML结构和JavaScript代码实现签名面板，并提供了代码示例和资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说上代码，本文参考自大神https://blog.youkuaiyun.com/weixin_30482181/article/details/96817268
css

<style>
        body,html{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        #canvas {
            border:0.01rem solid #f30;
        }
        #canvas-btn{
            display: block;
            margin: 0;
            padding: 0.13rem;
        }
        #clear_btn{
            width: 80%;
            background: #ca4341;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }
        #save_btn{
            width: 80%;
            background: #4cd964;
            margin: auto;
            text-align: center;
            line-height: 1rem;
            margin-top: 0.27rem;
            color: #fff;
            border-radius: 1.31rem;
            clear: both;
        }
    </style>

html

<canvas id='canvas'></canvas>
<div id="canvas-btn">
    <div id="clear_btn" class="op_btn">重画</div>
    <div id="save_btn" class="save_btn">保存</div>
    <div class="cleaerfix"></div>
</div>

js<

最低0.47元/天解锁文章