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特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
关于php循环跳出的问题
2013/07/01 PHP
php页面缓存方法小结
2015/01/10 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
Python字典操作简明总结
2015/04/13 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
小学生家长评语大全
2014/02/10 职场文书
安全生产月宣传标语
2014/10/06 职场文书
党员年度个人总结
2015/02/14 职场文书
早上好问候语大全
2015/11/10 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL