js+canvas实现网页签字，导出功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
margin: 0;
padding: 0;
border: 0px;
height: 100vh;
width: 100vw;
display: flex;
}
#long_home {
width: 80vw;
height: 80vh;
/* background-color: black; */
/* margin: auto; */
position: relative;
}
#home_body {
width: 10vw;
height: 10vw;
background-color: rgb(213, 30, 30);
position: absolute;
cursor: move;
}
</style>
<body>
<div id="long_home">
<canvas id="myCanvas" width="800" height="500" style="border:1px solid #e30909;margin: 15px; "></canvas>
<button onclick="clearCanvas()">清空</button>
<button onclick="exportPicture()">导出图片</button>
</div>
<script>
var canvas = document.getElementById('myCanvas') //获取canvas上下文
var cvsCtx = canvas.getContext('2d'); //创建canvas2D对象
let startX = 0 //定义原始X轴坐标点
let startY = 0 //定义原始y轴坐标点
// cvsCtx.fillStyle = "#FF0000";
// cvsCtx.fillRect(408, 260, 40, 40)
cvsCtx.lineWidth = 2
canvas.addEventListener('mousedown', ({ x, y }) => {
isDown = true
startX = x
startY = y
cvsCtx.beginPath();
canvas.addEventListener('mousemove', droping, false)
})
canvas.addEventListener('mouseup', stoping)
// 开始绘画
function droping(events) {
const { x, y } = events
if (!isDown) return
cvsCtx.moveTo(x, y)
cvsCtx.lineTo(startX, startY)
cvsCtx.stroke()
startX = x
startY = y
}
//停止绘画
function stoping() {
cvsCtx.closePath();
canvas.removeEventListener('mousemove', droping)
}
//清空画布
function clearCanvas() {
cvsCtx.clearRect(0, 0, canvas.width, canvas.height)
}
//canvas导出图片
function exportPicture() {
let url = canvas.toDataURL('image/png')
console.log('base64地址', url);
}
</script>
</body>
</html>
