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动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python读取word文档的方法
2015/05/09 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python交易记录链的实现过程详解
2019/07/03 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
详解python如何引用包package
2020/06/07 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
英国假发网站:Hothair
2018/02/23 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
小学领导班子对照材料
2014/08/23 职场文书
经典演讲稿开场白
2014/08/25 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
分居协议书范本
2014/11/03 职场文书
公务员年终个人总结
2015/02/12 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android