js签字版签名

最新推荐文章于 2024-05-10 09:16:43 发布

miao_zz

最新推荐文章于 2024-05-10 09:16:43 发布

阅读量370

点赞数

分类专栏： JS 笔记学习文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_37117408/article/details/127090543

版权

JS 同时被 3 个专栏收录

31 篇文章 0 订阅

订阅专栏

学习

15 篇文章 0 订阅

订阅专栏

笔记

6 篇文章 0 订阅

订阅专栏

js签字版签名

- 效果图
- 代码示例

效果图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			.canvasStyle {
				border: 1px solid red;
				margin-top: 100px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<canvas id="cvs" class="canvasStyle" width="500" height="300"></canvas>
		<button id="reset">重写</button>
	</body>
	<script>
		const cvs = document.getElementById("cvs");
		const ctx = cvs.getContext("2d");
		const elementPos = cvs.getBoundingClientRect();

		let isDrawing = false;
		cvs.addEventListener("mousedown", e => {
			isDrawing = true;
			ctx.beginPath();
			ctx.moveTo(e.offsetX, e.offsetY);
		})
		cvs.addEventListener("mousemove", e => {
			if (isDrawing) {
				ctx.lineTo(e.offsetX, e.offsetY);
				ctx.lineJoin = 'round';
				ctx.lineCap = 'round'
				ctx.strokeStyle = "#ff0000";
				ctx.stroke();
			}
		})
		cvs.addEventListener("mouseup", e => {
			isDrawing = false;
			ctx.closePath();
			cvs.removeEventListener("mousedown", e => {}, false);
			cvs.removeEventListener("mousemove", e => {}, false);
			cvs.removeEventListener("mouseup", e => {}, false);
		})
		cvs.addEventListener("mouseleave", e => {
			isDrawing = false;
			ctx.closePath();
			cvs.removeEventListener("mousedown", e => {}, false);
			cvs.removeEventListener("mousemove", e => {}, false);
			cvs.removeEventListener("mouseleave", e => {}, false);
		})
		document.querySelector("#reset").addEventListener("click", () => {
			ctx.clearRect(0, 0, elementPos.width, elementPos.height)
		})
	</script>
</html>