JavaScript - demo - 鼠标画线

最新推荐文章于 2023-04-08 21:18:37 发布

原创

最新推荐文章于 2023-04-08 21:18:37 发布 · 571 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js画线 #鼠标画线 #JavaScript

这篇博客通过JavaScript展示了如何实现在网页上跟随鼠标绘制线条的功能。利用jQuery库简化了部分代码，提供了相应的源代码和实际效果展示。

源代码（需要自行导入jQuery文件，当然你也可以自行修改代码，解除其对jQuery的依赖，鄙人暂时太懒不想做）：

<html>
	<head>
		<style>
			.pointer {
				width:2px;
				height:2px;
				background:black;
				position:absolute;
				border-radius:50%;
			}
			#pointerArea {
				width:100%;
				height:100%;
				position:absolute;
				top:0px;
			}
		</style>
		<script src='js/jquery.js'></script>
	</head>
	<body>
		<div id='pointerArea'></div>
		<div style='user-select:none; height:30px; padding:10px; text-align:center; background:gray; position:absolute; bottom:0px;'>
			<button onclick='reset()'>重 置</button>
			<button onclick='outputPageData();'>导 出</button>
		</div>
		<script>
			// 每个点的坐标
			var pointerArray = [];
			function createPointer(pX, pY) {
				var html = '<div class="pointer" style="width:2px; height:2px; position:absolute; background:black; border-radius:50%; top:'+pY+'px; left:'+pX