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 相关文章推荐
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
php实现单链表的实例代码
2013/03/22 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
可选择和输入的下拉列表框示例
2013/11/05 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
jquery实现购物车基本功能
2019/10/25 jQuery
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
小学生综合素质评语
2014/04/23 职场文书
公司任命书模板
2014/06/06 职场文书
社团活动总结报告
2014/06/27 职场文书
物业管理专业自荐信
2014/07/01 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书