创建canvas画布和画笔
let canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth,
canvas.height = window.innerHeight,
content = canvas.getContext('2d');
监听鼠标按下
canvas.addEventListener('mousedown', (e) => {
// 判断是鼠标按下 还是松开
this.isDown = true
content.moveTo(e.pageX, e.pageY);
})
监听鼠标移动
canvas.addEventListener('mousemove', (e) => {
console.log(this.isDown);
if (this.isDown) {
content.lineTo(e.pageX, e.pageY);
content.stroke()
}
})
监听鼠标松下
canvas.addEventListener('mouseup', (e) => {
this.isDown = false
})
双击鼠标保存canvas图片
canvas.addEventListener('dblclick', (e) => {
let link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = '签名';
link.click();
})
全部代码！！！！！！！
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
// 创建画布和画笔
let canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth,
canvas.height = window.innerHeight,
content = canvas.getContext('2d');
// 监听鼠标按下
canvas.addEventListener('mousedown', (e) => {
this.isDown = true
content.moveTo(e.pageX, e.pageY);
})
// 监听鼠标移动
canvas.addEventListener('mousemove', (e) => {
console.log(this.isDown);
if (this.isDown) {
content.lineTo(e.pageX, e.pageY);
content.stroke()
}
})
// 监听鼠标松下
canvas.addEventListener('mouseup', (e) => {
this.isDown = false
})
// 双击鼠标保存canvas图片
canvas.addEventListener('dblclick', (e) => {
let link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = '签名';
link.click();
})
</script>
</body>
</html>
好了，over了！！！！！！
