应用场景

1. 主要用于pc端客户签字使用

需求分析

1. 能够使用鼠标进行签字
2. 签字完成后，可以保存为图片格式上传

代码

直接贴代码，主要使用canvas绘制

html

 <canvas id="canvas"></canvas>
 <button id="btn"></button>

js

// 获取canvas元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置canvas宽高
canvas.width = canvas.offsetWidth
canvas.height = canvas.offsetHeight

// 给canvas元素注册事件
canvas.addEventListener('mousedown', onStart, false);

// 鼠标按下事件
var onStart = function (e) {
 	e.preventDefault();
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    // 注册鼠标移动、弹起、离开事件
    canvas.addEventListener('mousemove', mousemoveHandler, false)
    canvas.addEventListener('mouseup', mouseupHandler, false)
    canvas.addEventListener('mouseleave', mouseleaveHandler, false)
}

// 移动过程中设置线条
var mousemoveHandler = function (e) {
	e.preventDefault();
     let evt = e
     let coverPos = canvas.getBoundingClientRect();
     let mouseX = evt.clientX - coverPos.left;
     let mouseY = evt.clientY - coverPos.top;
     ctx.lineTo(mouseX, mouseY);
     ctx.stroke();
}
 var mouseupHandler = function (e) {
 	 e.preventDefault();
     canvas.removeEventListener('mousemove', mousemoveHandler, false)
     canvas.removeEventListener('mouseup', mouseupHandler, false)
}
 var mouseleaveHandler = function (e) {
 	 e.preventDefault();
     canvas.removeEventListener('mousemove', mousemoveHandler, false)
     canvas.removeEventListener('mouseup', mouseupHandler, false)
}

var btn = document.getElementById('btn');
btn.addEventListener('click', function (e) {
	e.preventDefault();
    var img = canvas.toDataURL('image/png');
    // canvas.toDataURL('image/jpeg', 0.8);
})