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中Transform动画属性用法详解
Jul 04 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JS实现的类似微信聊天效果示例
2019/01/29 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python del()函数用法
2013/03/24 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python中的二维列表实例详解
2018/06/19 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
python+django+rest框架配置创建方法
2019/08/31 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
入党申请书自我鉴定
2013/10/12 职场文书
见习期自我鉴定
2014/01/31 职场文书
网页美工求职信
2014/02/15 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
委托书范文
2014/04/02 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书