原生JS实现canvas移动端电子签名板/画板
2019-04-28 15:22
555 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Haozi_Din/article/details/89638873
GitHub链接-完整文档
最近做一个移动端项目, 有电子签名功能, 生产PNG格式上传服务器, 而且需要横屏签名, 这需要注意移动端的横屏后宽高的变化, 以下是JS核心部分, 完整文档请点击上面链接
[code] var canvas = document.getElementById("canvas"); //动态设置宽高 canvas.width = 400; canvas.height = 300; var content = canvas.getContext("2d"); //设置画笔的样式 content.strokeStyle = "#000"; content.lineWidth = 1; content.lineCap = 'round'; content.lineJoin = 'round'; content.shadowBlur = 1; content.shadowColor = '#000'; content.beginPath(); //点击 canvas.addEventListener("touchstart", function(e) { content.beginPath(); var touch = e.targetTouches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; content.moveTo(x, y); }); //移动 canvas.addEventListener("touchmove", function(event) { event.preventDefault(); var touch = event.targetTouches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; content.lineTo(x, y); content.stroke(); }); //结束 canvas.addEventListener("touchend", function(event) { content.closePath(); $('.but2').attr('disabled', false); }); //清除画布 .but1元素 点击事件 document.querySelector(".but1").onclick = function() { content.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight); }
竖屏效果:
横屏效果:
相关文章推荐
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
- 原生 JS + Canvas 实现五子棋游戏
- 原生JS+Canvas实现五子棋游戏实例
- 原生js实现移动端触摸轮播
- 3、js原生实现移动端手指滑动轮播图效果(3)
- 移动端纯原生JS不依赖ajax后台服务器实现省市县三级联动
- 原生js实现的移动端可拖动进度条插件功能详解
- 原生js实现移动端瀑布流式代码示例
- 原生JS+Canvas实现五子棋游戏实例
- 原生js实现简单移动端轮播图
- 原生js实现移动端的视频播放可拖拽小窗功能,点击小窗返回到原始页面
- 1、js原生实现移动端手指滑动轮播图效果(2)
- 原生js实现无缝滚动轮播图(移动端)-自动轮播
- 原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
- 使用原生js+canvas实现模拟心电图的实例
- 原生JS实现移动端轮播图。
- 移动端纯原生JS不依赖AJAX后台服务器实现省市县三级联动
- JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
- 原生js+canvas实现滑动吉林快三开奖网出售拼图验证码
- 原生js实现canvas气泡冒泡效果