移动端手写签名
监听移动端touch事件，在canvas上完成签名绘制，然后将canvas转为base64图片。
以下为代码。
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端手写签名</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
position: relative;
}
#canvas canvas {
display: block;
}
#clearCanvas {
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #DEDEDE;
z-index: 1;
}
#saveCanvas {
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #DEDEDE;
z-index: 1;
}
</style>
</head>
<body>
<div id="canvas">
<button id="clearCanvas">清除</button>
<button id="saveCanvas">保存</button>
</div>
<script type='text/javascript'>
window.onload = function () {
new lineCanvas({
el: document.getElementById("canvas"),//绘制canvas的父级div
clearEl: document.getElementById("clearCanvas"),//清除按钮
saveEl: document.getElementById("saveCanvas"),//保存按钮
// linewidth:1,//线条粗细，选填
// color:"black",//线条颜色，选填
// background:"#ffffff"//线条背景，选填
});
};
function lineCanvas(obj) {
this.linewidth = 1;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
};
this.canvas = document.createElement("canvas");
this.el.appendChild(this.canvas);
this.cxt = this.canvas.getContext("2d");
this.canvas.width = this.el.clientWidth;
this.canvas.height = this.el.clientHeight;
this.cxt.fillStyle = this.background;
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
this.cxt.strokeStyle = this.color;
this.cxt.lineWidth = this.linewidth;
this.cxt.lineCap = "round";
//开始绘制
this.canvas.addEventListener("touchstart", function (e) {
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this), false);
//绘制中
this.canvas.addEventListener("touchmove", function (e) {
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
this.cxt.stroke();
}.bind(this), false);
//结束绘制
this.canvas.addEventListener("touchend", function () {
this.cxt.closePath();
}.bind(this), false);
//清除画布
this.clearEl.addEventListener("click", function () {
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this), false);
//保存图片，直接转base64
this.saveEl.addEventListener("click", function () {
var imgBase64 = this.canvas.toDataURL();
console.log(imgBase64);
}.bind(this), false);
};
</script>
</body>
</html>