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截图_动力节点Java学院整理
Jul 11 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python中的__slots__示例详解
2017/07/06 Python
Python多进程写入同一文件的方法
2019/01/14 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python实现简易淘宝购物
2019/11/22 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
《珍珠泉》教学反思
2014/02/20 职场文书
档案工作汇报材料
2014/08/21 职场文书
创先争优演讲稿
2014/09/15 职场文书
升学宴祝酒词
2015/08/11 职场文书
Nginx快速入门教程
2021/03/31 Servers
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers