本文实例为大家分享了JavaScript实现移动端签字功能的具体代码，供大家参考，具体内容如下

一、html部分

<div class="mui-content-padded">
 <div class="mui-inline"><font style="font-family: '微软雅黑';font-size: 1.2rem;">验收人签字:</font></div>
</div>
<div class="mui-content-canvasDiv" style="overflow: hidden;">
 <canvas id="myCanvas" width="660" height="360" style="border:1px solid #f2f2f2;"></canvas>
 <div class="saveimgs" id="saveImgDiv"></div>
</div>

myCanvas是签字的div，saveImgDiv是保存后回显的div。

二、页面初始化，添加div签字功能

InitThis();

var mousePressed = false;
var lastX, lastY;
var ctx = document.getElementById('myCanvas').getContext("2d");
var c = document.getElementById("myCanvas");
var selected1, selected2;
function InitThis() {
 // 触摸屏
 c.addEventListener('touchstart', function(event) {
  console.log(1)
  if(event.targetTouches.length == 1) {
   event.preventDefault(); // 阻止浏览器默认事件，重要
   mousePressed = true;
   Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, false);
  }
 }, false);
 c.addEventListener('touchmove', function(event) {
  console.log(2)
  if(event.targetTouches.length == 1) {
   event.preventDefault(); // 阻止浏览器默认事件，重要
   if(mousePressed) { 
    Draw(event.touches[0].pageX - this.offsetLeft, event.touches[0].pageY - this.offsetTop, true);
 
   }
  }
 }, false);
 c.addEventListener('touchend', function(event) {
  console.log(3)
  if(event.targetTouches.length == 1) {
   event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
   mousePressed = false;
  }
 }, false);
 // 鼠标
 c.onmousedown = function(event) {
  mousePressed = true;
  Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
 };
 c.onmousemove = function(event) {
  if(mousePressed) {
   Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
  }
 };
 c.onmouseup = function(event) {
  mousePressed = false;
 };
}
 
function Draw(x, y, isDown) {
 if(isDown) {
  ctx.beginPath();
  ctx.strokeStyle = selected2;
  ctx.lineWidth = selected1;
  ctx.lineJoin = "round";
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(x, y);
  ctx.closePath();
  ctx.stroke();
 }
 lastX = x;
 lastY = y;
}

三、获取图片路径放到saveImgDiv里，签字回显逻辑

var file = "http://10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + new Date().getTime();
 
$("#saveImgDiv").append('<img src="'+ file + '" style="background:white" width="660" height="360">');

四、保存用户签名，可以放在保存提交成功的回调里

var saveimgs = document.getElementsByClassName("saveimgs")[0];
 
//保存签名图片
var image = c.toDataURL("image/png");
var ctximg = document.createElement("span");
ctximg.innerHTML = "<img src='" + image + "' alt='from canvas'/>";
if(saveimgs.getElementsByTagName('span').length >= 1) {
 var span_old = saveimgs.getElementsByTagName("span")[0];
 saveimgs.replaceChild(ctximg,span_old)
} else {
 saveimgs.appendChild(ctximg);
}

效果

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS如何实现获取文本框的内容？教你两个方法

  这篇文章给大家分享的是JS实现获取文本框的内容的方法。小编觉得挺实用的，对新手学习JavaScript的使用有帮助，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• 如何实现生成vue组件，思路和方法是什么

  在我们的印象使用中，vue除了写业务代码没有特别新奇的功能了，今天就来看看如何自动化生成vue组件文档

• Express框架中app.use的用法是什么

  一、设置静态文件目录语法如下：app.use(express.static(_dirname+'/public'));//设置静态文件目录注：将静态文件目录设置为项目根目录+‘/public’，可以这样写app.use(express.stat

• Javascript作用域怎样声明，闭包的应用是怎样

  本文详细讲解了Javascript的作用域、作用域链以及闭包，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• JS字面量对象有什么用处？如何用？

  本文给大家分享的是关于JS字面量对象的内容，js中的对象字面量也称为对象初始化器，一些新手朋友可能对JS字面量对象不是很了解，对此下面就介绍一下JS字面量对象的作用和使用，感兴趣的朋友可以了解看看。