做移动端收集电子签名项目的时候发现了一些坑:

1. 移动端的手指按下、移动、抬起事件跟PC端的鼠标按下、移动、弹起事件是不一样的

2. canvas它的属性宽高和样式宽高是不一样的,通过CSS来设置canvas的宽高会导致一些奇怪的问题

3. canvas的间距(如果有)会造成手指落点和实际绘画的点有偏移,所以在开始绘画的时候要先把画笔移动到正确的位置

    <canvas id="ESCanvas" width="400" height="400">该浏览器不支持canvas画布</canvas>
//PC端鼠标绘画代码
var canvas = document.getElementById('ESCanvas');
var ctx = canvas.getContext('2d');
var paint = false; canvas.onmousedown =function (e) {
paint = true;
ctx.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
canvas.onmousemove = function (e) {
if (paint) {
ctx.lineTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
ctx.stroke();
}
}
canvas.onmouseup = function (e) {
paint = false;
}
}
//移动端手绘代码

//阻止页面拖动
document.body.addEventListener('touchmove', function (e) {
e.preventDefault();
}, { passive: false }); var canvas = document.getElementById("ESCanvas");
var ctx = canvas.getContext("2d"); //页面样式
canvas.width = window.screen.width - 42;//左边距20,右边为对齐左边留20,边框左右各1
canvas.height = window.screen.height - 130;//顶边距20,底边距20,边框左右各1,按钮组68,按钮组底边距20 var l = canvas.offsetLeft;
var t = canvas.offsetTop; canvas.ontouchstart = function (e) {
ctx.beginPath();
ctx.moveTo(e.touches[0].pageX - l, e.touches[0].pageY - t);
} canvas.ontouchmove = function (e) {
ctx.lineTo(e.touches[0].pageX - l, e.touches[0].pageY - t);
ctx.stroke();
} canvas.ontouchend = function (e) {
ctx.closePath();
}

最后的页面效果图:

做移动端电子签名发现canvas的 一些坑的更多相关文章

  1. 如何使用Vue2做服务端渲染

    花费了一个月时间,终于在新养车之家项目中成功部署了vue2服务端渲染(SSR),并且使用上了Vuex 负责状态管理,首屏加载时间从之前4G网络下的1000ms,提升到了现在500-700ms之间,SS ...

  2. vue2.0做移动端开发用到的相关插件和经验总结1.0

    最近在用vue2.0做微信公众号相关的前端开发,经过这次开发实践,现将项目中用到的相关比较实用的插件及遇到的相关问题进行整理,希望和大家共同交流...... cssrem:一个CSS值转REM的VSC ...

  3. appium+python做移动端自动化测试

      1 导言 1.1 编制目的 该文档为选用Appium作为移动设备原生(Native).混合(Hybrid).移动Web(Mobile Web)应用UI自动化测试的相关自动化测试人员.开发人员等提供 ...

  4. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  5. 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

  6. vue2.0做移动端开发用到的相关插件和经验总结

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

  7. snkrs web端分析,canvas中的fingerpint

    snkrs web端分析,canvas中的fingerpint 代码如下 (()=>{ const canvas = document.createElement("canvas&qu ...

  8. react-navigation 做导航栏,发现 Android 上的标题不居中

    在做 React Native 应用的时候,我们常常使用 react-navigation 做导航栏,发现 Android 上的标题不居中,IOS 上没问题. 1 如果只有标题,那就在 headerT ...

  9. 如何实现 Https拦截进行 非常规“抓包” 珍惜Any 看雪学院 今天 前段时间在自己做开发的时候发现一个很好用的工具,OKHttp的拦截器(何为拦截器?就是在每次发送网络请求的时候都会走的一个回调)大概效果如下:

    如何实现 Https拦截进行 非常规“抓包” 珍惜Any 看雪学院 今天 前段时间在自己做开发的时候发现一个很好用的工具,OKHttp的拦截器(何为拦截器?就是在每次发送网络请求的时候都会走的一个回调 ...

随机推荐

  1. 【Storm篇】--Storm基础概念

    一.前述 Storm是个实时的.分布式以及具备高容错的计算系统,Storm进程常驻内存 ,Storm数据不经过磁盘,在内存中处理. 二.相关概念 1.异步: 流式处理(异步)客户端提交数据进行结算,并 ...

  2. 微信小程序入门(五)

    24.MINA框架讲解 MINA框架架构 25.小程序运行机制 小程序在首次打开的时间会比较长,后续再打开启动会很快,那么小程序是如何启动的呢? 运行机制-启动 冷启动 热启动 热启动:假入用户已经打 ...

  3. 『2019/4/9 TGDay2模拟赛 反思与总结』

    2019/4/9 TGDay2模拟赛 今天是\(TG\)模拟赛的第二天了,试题难度也是相应地增加了一些,老师也说过,这就是提高组的难度了.刚开始学难的内容,一道正解也没想出来,不过基本的思路也都是对了 ...

  4. C#版[击败98.85%的提交] - Leetcode717. 1比特与2比特字符 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  5. ELK-log4j2异步输出+logstash

    1.pom.xml配置文件 <dependency> <groupId>log4j</groupId> <artifactId>log4j</ar ...

  6. ELK-Logstash采集日志和输送日志流程测试

    讲解Logstash采集日志和输送日志流程测试,包括input,filter和output元素的测试 配置一:从elasticsearch日志文件读取日志信息,输送到控制台 $ cd /home/es ...

  7. leetcode — interleaving-string

    /** * Source : https://oj.leetcode.com/problems/interleaving-string/ * * * Given s1, s2, s3, find wh ...

  8. SmartSql = Dapper + MyBatis + Cache(Memory | Redis) + ZooKeeper + R/W Splitting + ......

    SmartSql Why 拥抱 跨平台 DotNet Core,是时候了. 高性能.高生产力,超轻量级的ORM.156kb (Dapper:168kb) So SmartSql TargetFrame ...

  9. Servlet主要相关类核心类 容器调用的过程浅析 servlet解读 怎么调用 Servlet是什么 工作机制

      WEB简介   Web项目 是 B/S结构 浏览器/服务器模式的 浏览器发起请求,服务器作出响应   请求的发起和响应使用HTTP协议进行通讯 所谓协议也就是一种固定格式   而Socket是应用 ...

  10. 痞子衡嵌入式:一表全搜罗常见短距离无线通信协议(Wi-Fi/Bluetooth/ZigBee/Thread...)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是常见短距离无线通信协议. 短距离无线通信是物联网的基础,随着物联网IoT的火热发展,各种短距离无线通信协议也是层出不穷,这些协议标准各有 ...