前言：

在上一篇文章中讲到了如何使用canvas在PC端实现电子签名,下面我们稍微修改一下代码在h5端也可以实现

效果图：

实现思路：

使用canvas来实现手写签名的功能，然后将canvas转化为图片

通过监听touchstart/touchmove/touchend/touchcancel来计算滑动位置

html布局

<div class="container"><div><button id="clear">清空画布</button><button id="imgInfo">保存签名</button></div><canvas id="canvas" width="300" height="300"></canvas><div class="imgs" id="imgs"></div>
</div>

css样式：

* {margin: 0;padding: 0;
}
#canvas {border: 1px solid black;margin: 0 auto;}

javascript：

    //1.获取canvasvar myCanvas = document.getElementById("canvas");//获取2d对象var ctx = myCanvas.getContext("2d");//清空画布var clear = document.getElementById("clear");// 保存签名var imgInfo = document.getElementById("imgInfo");// 保存的盒子var imgs = document.getElementById("imgs");//控制线条是否画var isMouseMove = false;//线条位置var lastX, lastY;window.onload = function () {initCanvas();};//初始化function initCanvas() {let offset = myCanvas.getBoundingClientRect();var start = (e) => {e.preventDefault();isMouseMove = true;drawLine(e.changedTouches[0].clientX - offset.left,e.changedTouches[0].clientY - offset.top,false);};let move = (e) => {if (isMouseMove) {drawLine(e.changedTouches[0].clientX - offset.left,e.changedTouches[0].clientY - offset.top,true);}};let end = (e) => {isMouseMove = false;};let cancel = (e) => {isMouseMove = false;};myCanvas.addEventListener('touchstart', start)myCanvas.addEventListener('touchmove', move)myCanvas.addEventListener('touchend', end)myCanvas.addEventListener("touchcancel", cancel)}//画线function drawLine(x, y, isT) {if (isT) {ctx.beginPath();ctx.lineWidth = 2; //设置线宽状态ctx.strokeStyle = 'black'; //设置线的颜色状态ctx.lineCap = 'round'ctx.lineJoin = "round";ctx.moveTo(lastX, lastY);ctx.lineTo(x, y);ctx.stroke();ctx.closePath();}// 每次移动都要更新坐标位置lastX = x;lastY = y;}//清空画图function clearCanvas() {imgs.innerHTML = ""ctx.beginPath();ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);ctx.closePath(); //可加入，可不加入}//保存图片function saveImgInfo() {var images = myCanvas.toDataURL('image/png');imgs.innerHTML = `<img src='${images}'>`}clear.addEventListener("click", clearCanvas);imgInfo.addEventListener("click", saveImgInfo);

PC端canvas实现电子签名
小程序canvas生成海报

手机端canvas实现电子签名相关推荐

canvas手机端绘图解决方案
解决方案js:https://pan.baidu.com/s/1jIys2aU 我们使用canvas通常会遇到一个问题就是坐标系的问题,如果按象限来说,一般canvas是在第四象限,但是我们通常都喜欢 ...
飞机大战HTML5游戏源码，基于Canvas制作的网页版飞机大战游戏+飞机大战手机端
简介: 飞机大战HTML5游戏源码是一款基于Canvas制作的网页版飞机大战游戏,画质精美的飞机大战手机端游戏源码网盘下载地址: http://kekewangLuo.net/W1S2LQcqAT2 ...
html5中canvas画布实现手机端和移动端的刮刮乐效果
用html5中的canvas实现刮刮乐的效果使用html+css实现背景的样式使用clearRect()方法实现挂去的作用手机端使用addEventListener()监听手机端滑动事件tou ...
html5实现安卓的手写功能,html5 canvas手写字代码(兼容手机端)(示例代码)
html5 canvas手写字代码(兼容手机端) 画板实验清空生成图片 var canvas,board,img; canvas = document.getElementById('myCan ...
移动端html5广告的优势,h5手机端开发的优势都有哪些呢
原标题:h5手机端开发的优势都有哪些呢现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了 ...
关于pc手机端自适应开发的一些记录
一.pc端.手机端开发的区别 1.兼容性 1⃣️pc需要注意各个浏览器的兼容性,主要有谷歌.火狐.qq.uc.opera.ie.360等等.浏览器的内核不同,对不同css的展示效果不一致.(这里需要去 ...
pdf文件在线预览，兼容多浏览器和手机端
前言最近学习了一下网页在线预览pdf文件的实现方式,主要有: PDFObject:使用起来非常方便,电脑端兼容性好,试过能兼容ie9,也很快,但在手机上一些浏览器无法在线. jquery.media ...
从手机端 H5 制作来看 WEB 动画的术与道
我们在微信朋友圈里经常看到很多人分享 H5 的链接,有的科技感十足,有的展示炫目,有的非常有创意,各大公司也把H5作为他们品牌传播,活动预热的很好方式.企业商户对于这种方式也很有好感,从而导致了 H5 ...
cocos creator屏幕适配fitHeight / fitWidth，手机端竖屏，pc端浏览器适配，pc分辨率全屏适配，血条跟随的适配
一,使用creator3.3.2 分别实现手机端和浏览器的适配效果如下打包web-mobile(居然会有这种需求 /流汗!) pc浏览器显示手机端显示 1.首先在项目中设置分辨率和默认适配这里 ...

手机端canvas实现电子签名

前言：

效果图：

实现思路：

html布局

css样式：

javascript：

手机端canvas实现电子签名相关推荐

最新文章

热门文章