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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
纯html+css实现奥运五环的示例代码
Aug 02 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
PHP cron中的批处理
2008/09/16 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
教师个人自我评价范文
2014/04/13 职场文书
施工安全责任书范本
2014/07/24 职场文书
2014年建筑工作总结
2014/11/26 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers