canvas制作签名

最新推荐文章于 2024-05-23 09:24:55 发布

扬帆起航136

最新推荐文章于 2024-05-23 09:24:55 发布

阅读量104

点赞数

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

本文链接：https://blog.csdn.net/qq_62994974/article/details/128524018

版权

前端专栏收录该内容

7 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0%;padding:0px;}
			html body{background-color: pink;height: 100%;overflow: hidden;}
			body{background-color: pink;}
			
			#canvas{margin: 0% auto;background-color: gray;
			position: absolute;
			left: 0%;
			top: 0%;
			right: 0%;
			bottom: 0%;
			margin: auto;
			} 
		</style>  
	</head>
	<body>
		<canvas id="canvas" width="600" height="600">
			
		</canvas>
	</body>
	<script>
		window.onload=function(){
			var canvas=document.querySelector("#canvas");
			if(canvas.getContext){
				var ctx=canvas.getContext("2d");
				canvas.onmousedown=function(event){
					var event=event||window.event;
					if(canvas.setCapture){
						canvas.setCapture();
					}
					
                    ctx.beginPath();
					ctx.moveTo(event.clientX-canvas.offsetLeft,event.clientY-canvas.offsetTop);
					
					document.onmousemove=function(event){	
						event=event||window.event;
						ctx.save();
						ctx.strokeStyle="pink";
						
						ctx.lineTo(event.clientX-canvas.offsetLeft,event.clientY-canvas.offsetTop);
						ctx.stroke();
						ctx.restore();
					}
					document.onmouseup=function(event){
						document.onmousemove=document.onmouseup=null;
						
					}
					
				}

				return false
			}
		}

	
	</script>
</html>