HTML部分
<canvas class="canvas-box" id="myCanvas" width="400" height="200"></canvas>
<img class="signImage" id="tsImage" src="" alt="">
<p>
<button type="button" id="clearSign" >清除</button>
<button type="button" id="saveSign" >保存</button>
</p>
<style>
.canvas-box {
width: 400px;
height: 200px;
border: 1px solid darkgrey;
}
.signImage {
display: none;
}
</style>
js部分
mySign({
canvasId: 'myCanvas',
clearId: '#clearSign',
saveId: '#saveSign',
imgId: '#signImage',
});
function mySign(obj) {
let canvas = document.getElementById(obj.canvasId);
let context = canvas.getContext('2d');
// 设置画笔属性
context.lineWidth = 2;
context.strokeStyle = "#000000";
$(document).on('click', obj.clearId, function () {
clearCanvas()
}).on('click', obj.saveId, function () {
saveSignature()
})
// 鼠标按下事件
canvas.addEventListener("mousedown", function (event) {
context.beginPath();
context.moveTo(event.offsetX, event.offsetY);
canvas.addEventListener("mousemove", drawLine);
});
// 鼠标抬起事件
canvas.addEventListener("mouseup", function () {
canvas.removeEventListener("mousemove", drawLine);
});
// 绘制线条函数
function drawLine(event) {
context.lineTo(event.offsetX, event.offsetY);
context.stroke();
}
// 清空画布
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.style.display = 'block';
let $image = $(obj.imgId)[0];
$image.style.display = 'none';
$image.src = '';
}
// 保存签名
function saveSignature() {
let dataURL = canvas.toDataURL();
canvas.style.display = 'none';
let $image = $(obj.imgId)[0];
$image.style.display = 'block';
$image.src = dataURL;
}
}