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实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
html5简介及新增功能介绍
May 18 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/02 无线电
php 静态页面中显示动态内容
2009/08/14 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
js函数般调用正则
2008/04/08 Javascript
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
django迁移文件migrations的实现
2020/03/31 Python
Python3读写ini配置文件的示例
2020/11/06 Python
python安装sklearn模块的方法详解
2020/11/28 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
会员活动策划方案
2014/08/19 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android