JS的canvas简易功能:电子签名

最新推荐文章于 2023-07-27 11:00:29 发布

Perkz ℡

最新推荐文章于 2023-07-27 11:00:29 发布

阅读量226

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53593647/article/details/128635190

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<!-- canvas西布:是HTML5中新增的一个特性，双闭合标签 -->
		<!-- canvas标签默认宽度与高度 309 *15 -->
		<!--浏览器认为canvas标签是一张图片 -->
		<!--给canvas面布添加文本内容没有任何意义 -->
		<!--给canvas标签添加子节点没有任何意义的 -->
		<!--你想操作canvas画布: 画布当中绘制图形、显示一个文字，都必须通过JS完成 -->
		<!--canvas标签的wlh务必通过canvas标签属性widthlheight设置 -->
		<!-- 切记不能通过样式去设置画布的宽度与高度 -->
		<canvas id="signature" width="1500" height="1000"></canvas>

	</body>
	
	<script type="text/javascript">
		// //通过JS当中"笔"去完成
		// //canvas标签任何操作务必通过JS完成
		// let canvas = document.querySelector('canvas');//获取画布的笔[上下文]
		// let ctx = canvas .getContext('2d');
		// //绘制线段
		// console.log(ctx);
		// //其他点的设置
		// ctx.moveTo(0,100);
		// ctx.lineTo(100,100);
		// ctx.lineTo(200,50); 
		// //可以设置起点与最终的结束点连接在一起
		// //设置图形填充颜色
		// ctx.fillStyle="red";
		// ctx.fill();
		// //设置线段颜色 粗细
		// ctx.strokeStyle="purple";
		// ctx.lineWidth="10"
		// ctx.closePath();
		// //stroke方法绘制线段
		// ctx.stroke();
		// 获取 canvas 元素
		var canvas = document.getElementById('signature');
		var ctx = canvas.getContext('2d');
		
		// 设置笔触样式
		ctx.strokeStyle = 'black';
		ctx.lineWidth = 2;
		
		// 是否正在绘制
		var drawing = false;
		
		// 开始绘制
		canvas.addEventListener('mousedown', function(e) {
		  drawing = true;
		  ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
		});
		
		// 绘制中
		canvas.addEventListener('mousemove', function(e) {
		  if (drawing) {
		    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
		    ctx.stroke();
		  }
		});
		
		// 结束绘制
		canvas.addEventListener('mouseup', function() {
		  drawing = false;
		});

	</script>	
	
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
</html>