html5 利用canvas手写签名并保存的实现方法


Posted in HTML / CSS onJuly 12, 2018

最近公司在做一个签名的功能,主要用到了canvas画线的功能结合移动端touch事件

js部分是这样的:

window.onload = function() {
    new lineCanvas({
        el: document.getElementById("canvas"),//绘制canvas的父级div
        clearEl: document.getElementById("clearCanvas"),//清除按钮
        saveEl: document.getElementById("saveCanvas"),//保存按钮
        //      linewidth:1,//线条粗细,选填
        //      color:"black",//线条颜色,选填
        //      background:"#ffffff"//线条背景,选填
    });
};
function lineCanvas(obj) {
    this.linewidth = 1;
    this.color = "#000000";
    this.background = "#ffffff";
    for (var i in obj) {
        this[i] = obj[i];
    };
    this.canvas = document.createElement("canvas");
    this.el.appendChild(this.canvas);
    this.cxt = this.canvas.getContext("2d");
    this.canvas.width = this.el.clientWidth;
    this.canvas.height = this.el.clientHeight;
    this.cxt.fillStyle = this.background;
    this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
    this.cxt.strokeStyle = this.color;
    this.cxt.lineWidth = this.linewidth;
    this.cxt.lineCap = "round";
    //开始绘制
    this.canvas.addEventListener("touchstart", function(e) {
        this.cxt.beginPath();
        this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }.bind(this), false);
    //绘制中
    this.canvas.addEventListener("touchmove", function(e) {
        this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        this.cxt.stroke();
    }.bind(this), false);
    //结束绘制
    this.canvas.addEventListener("touchend", function() {
        this.cxt.closePath();
    }.bind(this), false);
    //清除画布
    this.clearEl.addEventListener("click", function() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }.bind(this), false);
    //保存图片,直接转base64
    this.saveEl.addEventListener("click", function() {
        var imgBase64 = this.canvas.toDataURL();
        console.log(imgBase64);
    }.bind(this), false);
};

这是效果图:

html5 利用canvas手写签名并保存的实现方法

附上html和css

<div id="canvas">
    <p id="clearCanvas">清除</p>
    <p id="saveCanvas">保存</p>
</div>

html,body{
    width: 100%;
    height: 100%;
}
#canvas{
    width: 100%;
    height: 100%;
    position: relative;
}
#canvas canvas{
    display: block;
}
#clearCanvas{
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 1px solid #DEDEDE;
    z-index: 1;
}
#saveCanvas{
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid #DEDEDE;
    z-index: 1;
}

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

HTML / CSS 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
详解Html5微信支付爬坑之路
Jul 24 #HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 #HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 #HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 #HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 #HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 #HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 #HTML / CSS
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
php使用json_encode对变量json编码
2014/04/07 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP二维数组去重算法
2016/12/17 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
js实现旋转木马效果
2017/03/17 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
Python之re操作方法(详解)
2017/06/14 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
中科前程Java笔试题
2016/11/20 面试题
一年级班主任感言
2014/03/08 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
检讨书1000字
2014/10/11 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
商业计划书格式、范文
2019/03/21 职场文书
检讨书格式
2019/04/25 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
python本地文件服务器实例教程
2021/05/02 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server