JavaScript实现移动端签字功能本⽂实例为⼤家分享了JavaScript实现移动端签字功能的具体代码，供⼤家参考，具体内容如下⼀、html部分
<div class="mui-content-padded">
<div class="mui-inline"><font >验收⼈签字:</font></div>
</div>
<div class="mui-content-canvasDiv" >
<canvas id="myCanvas" width="660" height="360" ></canvas>
<div class="saveimgs" id="saveImgDiv"></div>
</div>
myCanvas是签字的div，saveImgDiv是保存后回显的div。
⼆、页⾯初始化，添加div签字功能
InitThis();
var mousePressed = false;
var lastX, lastY;
var ctx = ElementById('myCanvas').getContext("2d");
var c = ElementById("myCanvas");
var selected1, selected2;
function InitThis() {
// 触摸屏
c.addEventListener('touchstart', function(event) {
console.log(1)
if(event.targetTouches.length == 1) {
event.preventDefault(); // 阻⽌浏览器默认事件，重要
mousePressed = true;
uches[0].pageX - this.offsetLeft, uches[0].pageY - this.offsetTop, false);
}
}, false);
c.addEventListener('touchmove', function(event) {
console.log(2)
if(event.targetTouches.length == 1) {
event.preventDefault(); // 阻⽌浏览器默认事件，重要
if(mousePressed) {
uches[0].pageX - this.offsetLeft, uches[0].pageY - this.offsetTop, true);
}
}
}, false);
c.addEventListener('touchend', function(event) {
console.log(3)
if(event.targetTouches.length == 1) {
event.preventDefault(); // 阻⽌浏览器默认事件，防⽌⼿写的时候拖动屏幕，重要
mousePressed = false;
}
}, false);
// ⿏标
mousePressed = true;
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
};
if(mousePressed) {
Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
}
};
mousePressed = false;
};
}
function Draw(x, y, isDown) {
if(isDown) {如何启用javascript功能
ctx.beginPath();
ctx.strokeStyle = selected2;
ctx.lineWidth = selected1;
ctx.lineJoin = "round";
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x;
lastY = y;
}
三、获取图⽚路径放到saveImgDiv⾥，签字回显逻辑var file = "10.1.31.173:8097/upload/" + iv[0].zjqm + "?v=" + new Date().getTime();
$("#saveImgDiv").append('<img src="'+ file + '" width="660" height="360">');
四、保存⽤户签名，可以放在保存提交成功的回调⾥var saveimgs = ElementsByClassName("saveimgs")[0];
//保存签名图⽚
var image = c.toDataURL("image/png");
var ctximg = ateElement("span");
ctximg.innerHTML = "<img src='" + image + "' alt='from canvas'/>";
ElementsByTagName('span').length >= 1) {
var span_old = ElementsByTagName("span")[0];
} else {
saveimgs.appendChild(ctximg);
}
效果
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。