<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<canvas id="sign" width=400 height=150 ></canvas>
</div>
<br>
<button id="btn_submit">提交签名</button> <button id="btn_clear">重填</button>
</body>
</html>
body{
background:#eee;
}
body > div{
background:url(https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg) no-repeat center / 100%
}
canvas{
background:transparent
}
var sign = document.querySelector('#sign');
var ctx = sign.getContext('2d')
var down
sign.addEventListener('mousedown', function (e) {
down = {
x: e.clientX,
y: e.clientY,
}
ctx.beginPath()
ctx.lineWidth="5";
ctx.strokeStyle="#a00";
ctx.moveTo(down.x, down.y);
})
sign.addEventListener('mousemove', function (e) {
if (down) {
down1 = {
x: e.clientX,
y: e.clientY,
}
ctx.lineTo(down1.x, down1.y)
ctx.moveTo(down1.x, down1.y)
ctx.stroke();
down = down1
}
})
document.addEventListener('mouseup', function () {
down = null;
ctx.closePath();
})
btn_clear.addEventListener('click', function () {
ctx.clearRect(0, 0, 400, 150)
})
btn_submit.addEventListener('click', function () {
let base64 = sign.toDataURL()
})
网友评论