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

相关阅读:
1739. 放置盒子贪心
spring全家桶
Web APIs——正则表达式使用
WPF 键盘事件捕获
WiFi6的基础知识
测试开发：10分钟Flask快速入门【建议收藏】
[汇编语言实验]查看CPU和内存，用机器指令和汇编指令编程
OPTEE：CA-TA会话的创建（二）
类和对象（中）（构造函数、析构函数和拷贝构造函数）
SQLite—免费开源数据库系列文章目录

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