使用canvas制作签名板

最新推荐文章于 2023-11-29 17:05:01 发布

皮卡丘

最新推荐文章于 2023-11-29 17:05:01 发布

阅读量317

点赞数

分类专栏：前端开发文章标签：前端 javascript servlet

本文链接：https://blog.csdn.net/weixin_44680639/article/details/125798920

版权

前端开发专栏收录该内容

36 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: gray;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background:white;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			
			var canvas =document.getElementById("test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
			}
			
			canvas.onmousedown=function(ev){
				ev = ev || window.event;
				if(canvas.setCapture){
					canvas.setCapture();
				}
				ctx.beginPath();
				ctx.moveTo(ev.clientX -canvas.offsetLeft,ev.clientY -canvas.offsetTop);
				document.onmousemove=function(e){
					ctx.save();
					ctx.strokeStyle="pink";
					e = e || event;
					ctx.lineTo(e.clientX -canvas.offsetLeft,e.clientY -canvas.offsetTop);
					ctx.stroke();
					ctx.restore();
				}
				document.onmouseup=function(){
					document.onmousemove=document.onmouseup=null;
					if(document.releaseCapture){
						document.releaseCapture();
					}
				}
				return false;
			}
			
		}
		
	</script>
</html>