canvas制作签名版

直接复制粘贴

代码如下

<!DOCTYPE html>
<html>
<head>
	<title>Signature Pad</title>
	<style>
		canvas {
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<canvas id="signature-pad" width="400" height="200"></canvas>
	<br>
	<button id="*****-button">Clear</button>

	<script>
		// 获取canvas元素
		var canvas = document.getElementById('signature-pad');
		// 获取2D绘图上下文
		var ctx = canvas.getContext('2d');
		// 定义变量记录鼠标是否按下
		var isMouseDown = false;
		// 定义变量记录鼠标位置
		var lastX, lastY;

		// 绑定鼠标按下事件
		canvas.addEventListener('mousedown', function(e) {
			isMouseDown = true;
			// 记录鼠标位置
			lastX = e.clientX - canvas.offsetLeft;
			lastY = e.clientY - canvas.offsetTop;
		});

		// 绑定鼠标移动事件
		canvas.addEventListener('mousemove', function(e) {
			if (isMouseDown) {
				// 计算鼠标移动距离
				var currentX = e.clientX - canvas.offsetLeft;
				var currentY = e.clientY - canvas.offsetTop;
				// 绘制线条
				ctx.beginPath();
				ctx.moveTo(lastX, lastY);
				ctx.lineTo(currentX, currentY);
				ctx.stroke();
                
				// 更新鼠标位置
				lastX = currentX;
				lastY = currentY;
			}
		});

		// 绑定鼠标松开事件
		canvas.addEventListener('mouseup', function(e) {
			isMouseDown = false;
		});

		// 绑定清空按钮点击事件
		var Button = document.getElementById('*****-button');
		Button.addEventListener('click', function() {
			// 清空画布
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		});
	</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

相关阅读:
排序 “叁” 之交换排序
探寻JWT的本质：它是什么？它有什么作用？
Gunicorn部署django报异常 server closed the connection unexpectedly
[Jenkins] 物理机安装 Jenkins
Doping：使用精心设计的合成数据测试和评估异常检测器的技术
mysql 闪回表工具
1.2 基本分类
MPLS虚拟专用网--跨域OptionC方案
Java代码审计基础——RMI原理和反序列化利用链
解决uniapp微信小程序canvas不能引入字体的问题

原文地址：https://blog.csdn.net/weiyi47/article/details/133755190