canvas篇--初学canvas案例---canvas签名

最新推荐文章于 2024-06-11 00:11:31 发布

咖啡壶子

最新推荐文章于 2024-06-11 00:11:31 发布

阅读量423

点赞数

分类专栏：前端从入门到精通 # 前端技术文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/TroyeSivanlp/article/details/126645545

版权

前端从入门到精通同时被 2 个专栏收录

64 篇文章

订阅专栏

前端技术

16 篇文章

订阅专栏

效果如下

代码如下：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body,
		html {
			width: 100%;
			overflow: hidden;
		}

		body {
			background-color: green;
		}

		#test {
			background-color: #fff;
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			margin: auto;
		}
	</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 = test.getContext('2d')
		}
		canvas.onmousedown = function (ev) {
			ev = ev || event;
			if (canvas.setCapture) {
				canvas.setCapture()
			}

			ctx.beginPath()
			ctx.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop)
			document.onmousemove = function (ev) {
				ev = ev || event;
				ctx.save()
				ctx.strokeStyle = "pink"
				ctx.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
				ctx.stroke();
				ctx.restore()

			}
			document.onmouseup = function () {
				document.onmousemove = document.onmouseup = null;
				if (document.releaseCapture) {
					document.releaseCapture();
				}
			}
			return false;
		}
	}

</script>

</html>