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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP中用hash实现的数组
2011/07/17 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python中count函数简单用法
2020/01/05 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
初中高效课堂实施方案
2014/02/26 职场文书
公司晚会策划方案
2014/05/17 职场文书
廉洁自律证明
2015/06/24 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
python自然语言处理之字典树知识总结
2021/04/25 Python