H5 canvas+js实现签名板

最新推荐文章于 2024-05-22 16:14:07 发布

小蟹！

最新推荐文章于 2024-05-22 16:14:07 发布

阅读量760

点赞数 2

分类专栏：前端学习日记文章标签： canvas

本文链接：https://blog.csdn.net/qq_45310244/article/details/105363877

版权

前端学习日记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

示例：

代码部分：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>签名板</title>
	<style>
		#myCanvas {
			background: #cccccc;
			display: block;
			margin: 0 auto;
		}
		#clear{
			margin-left: 30%;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="600" height="300"></canvas>
	<button id="clear" onclick="canvas.width = canvas.width">复原</button>
</body>
<script>
	var canvas = document.querySelector('#myCanvas');//画布
	var ctx = canvas.getContext('2d');//画笔
	(function(){
		ctx.lineWidth = .5;
		canvas.onmousedown = function () {
			ctx.beginPath();
			ctx.moveTo(event.offsetX, event.offsetY);//起点
			document.onmousemove = function(){
				ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
				ctx.stroke();
			}
			document.onmouseup = function(){
				document.onmousemove = null;
			}
		}
	})();
</script>
</html>