文章
html,js实现手写签名效果
时间：2024-12-17 11:03
阅读：407
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{height:100%;overflow: hidden;}
#box{border:1px solid black;}
</style>
</head>
<body>
<canvas id="box" width="300" height="300"></canvas>
<button id="center">确认</button>
</body>
</html>
<body>const canvas = document.getElementById("box");
const ctx = canvas.getContext("2d");
let isDrawing = false;
canvas.addEventListener('mousedown', (event) => {
isDrawing = true;
ctx.moveTo(event.pageX, event.pageY)
})
canvas.addEventListener('mousemove', (event) => {
if(isDrawing) {
ctx.lineTo(event.pageX, event.pageY)
ctx.stroke()
}
})
canvas.addEventListener('mouseup', (event) => {
isDrawing = false;
})
canvas.addEventListener('touchstart', (event) => {
isDrawing = true;
ctx.moveTo(event.pageX, event.pageY)
})
canvas.addEventListener('touchmove', (event) => {
if(isDrawing) {
ctx.lineTo(event.pageX, event.pageY)
ctx.stroke()
}
})
canvas.addEventListener('touchend', (event) => {
isDrawing = false;
})
//可将签名画布转为图片base64
document.getElementById("center").addEventListener('click', function () {
var imgBase64 = canvas.toDataURL();
var imgPng = canvas.toDataURL('image/png');
var imgJpg = canvas.toDataURL('image/jpeg', 0.8);
console.log(imgBase64, imgPng, imgJpg)
})
