canvas画布实现手写签名效果的示例代码


Posted in HTML / CSS onApril 23, 2019

最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~

HTML代码:

<!--手写区-->
        <div class="mSign_signMark_box">
            <div class="mSign_signMark_write_box">
                <div id="mSign_signMark_signature_pad" class="mSign_signMark_body_box">
                    <div class="mSign_signMark_body">
                        <span  class="mSign_signMark_clear_out">
                            <img src="../images/mCommon_basicIcon_deleteRed.png">
                        </span>
                        <p>手写区</p>
                        <canvas id="mSign_signMark_canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!--手写区 end-->
        <!--底部按钮-->
        <div class="mSign_signMark_footer">
            <span id="mSign_signMark_clear_out" class="mSign_signMark_footer_cancle">清除</span>
            <span id="mSign_signMark_submit" class="mSign_signMark_footer_sure">确定</span>
        </div>
        <!--底部按钮 end-->

CSS样式:

.mSign_signMark_box{padding: 15px 15px 26px 15px;}
.mSign_signMark_footer{max-width:640px;margin:0 auto;height: 44px;background: #4ba7eb;position: fixed;bottom: 0;left: 0;right: 0;color:#fff;font-size: 16px;text-align: center;line-height: 44px;}
.mSign_signMark_footer span{display: block;width: 50%;text-align: center;float: left;}
.mSign_signMark_footer_cancle{background: #f4f4f5;color: #333333;}
/*手写签名*/
.mSign_signMark_write_box{position: relative;height: 240px;}
.mSign_signMark_body_box {position: absolute;background-color: #fff;border: 1px solid #ccc;top:0;left: 0;right: 0;bottom: 0;width: 99%;height: auto;min-width: 250px;min-height: 140px;}
.mSign_signMark_body {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.mSign_signMark_body canvas {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.mSign_signMark_body p{position: absolute;font-size: 14px;color: #ccc;text-align: center;width: 100%;top: 50%;margin-top: -22px;}
.mSign_signMark_clear_out{position: absolute;top:-10px;right: -5px;z-index: 10;display: none;}
.mSign_signMark_clear_out img{width: 18px;height: 18px;}

页面引入JS:

//手写区触摸事件
$(function() {
    var ctouch=$('.mSign_signMark_body canvas');
    ctouch.bind("touchstart",function(event){
        $('.mSign_signMark_body p').hide();
    });
    ctouch.mouseover(function(event) {
        $('.mSign_signMark_body p').hide();
    });
});

手写签名引入js文件地址:qianmian-js_3water.rar

实现效果如下:

canvas画布实现手写签名效果的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 #HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 #HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 #HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 #HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 #HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 #HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 #HTML / CSS
You might like
我的群发邮件程序
2006/10/09 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php中opendir函数用法实例
2014/11/15 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
PyTorch的torch.cat用法
2020/06/28 Python
公益广告标语
2014/06/19 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
售房协议书
2014/08/19 职场文书
四风对照检查材料范文
2014/09/27 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
公司催款律师函
2015/05/27 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
MySQL8.0的WITH查询详情
2021/08/30 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server