做移动端电子签名发现canvas的一些坑

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

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，按钮组底边距20var 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();
}

最后的页面效果图：

转载于:https://www.cnblogs.com/marisen/p/10607022.html

做移动端电子签名发现canvas的一些坑相关推荐

vue做移动端适配最佳解决方案，亲测有效
最近在做商城的项目,发现有赞的ui非常适合,但有一个问题是有赞的ui用的单位是px,做不了移动端的适配,官网的提供的vw适配方案发现不可行,最后还是决定rem来做适配,上网搜了一下,发现了一套可用方案 ...
我问你这篇保熟不？！ -- 做服务端开发，不懂网络层，真的可以吗？
文章目录唠嗑两句·网络层网络层简介网际协议IP 常见的三类IP地址 A类 B类.C类 IP地址与硬件地址地址解析协议ARP IP层转发分组子网划分子网划分的背景意义什么是子网划分? 子网 ...
java sslsocket程序_JAVA与C++进行sslsocket通信，JAVA做服务端或客户端
前几天有位网友问我关于Unity3D里面使用Protobuf的方法,一时有事拖到现在才写这篇文章,不好意思哈. 本文测试环境: 系统:WINDOWS 7(第3.6步).OS X 10.9(第4步) 软 ...
java服务端开发 php_PHP使用thrift做服务端开发
php中文网最新课程每日17点准时技术干货分享 php使用thrift做服务端开发 thrift采用接口描述语言定义和创建服务,用二进制格式传输数据,体积更小.效率更高,对于高并发.数据量大和多语言 ...
php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
土地利用转移矩阵图怎么做_肺癌骨转移有哪些早期症状？做什么检查可以发现？怎么治疗？...
晚期肺癌很容易出现远处转移,最常见的转移部位有:脑.骨骼.肾上腺.对侧肺.肝脏.在这些转移中,有一种转移在早期就会出现明显的症状,这就是肺癌骨转移.肺癌骨转移会出现哪些明显的早期症状呢? 肺癌骨转移的 ...
干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
做B端产品经理好还是做C端产品经理好？
做B端产品经理好还是做C端产品经理好?这个问题也是一些小白和刚转行进入产品经理的新人的一个疑问,做哪种产品经理好.本文从三个层面为大家进行剖析. B端产品经理 1.定义层面:B端产品经理和C端产品经理 ...
如何来做移动端网站SEO
随着移动端互联网的不断发展,越拉越多的企业开始注重移动端网站,想要让移动端网站在移动端搜索引擎占据一个良好的排名,就必须要了解移动端网站seo的一些技巧.那么,如何来做移动端网站seo呢? 1.域名 ...

做移动端电子签名发现canvas的一些坑

做移动端电子签名发现canvas的一些坑相关推荐

最新文章

热门文章

做移动端电子签名发现canvas的 一些坑

做移动端电子签名发现canvas的 一些坑相关推荐

最新文章

热门文章

做移动端电子签名发现canvas的一些坑

做移动端电子签名发现canvas的一些坑相关推荐