JavaScript - demo - 两点之间画线

最新推荐文章于 2023-10-24 20:19:05 发布

coffee_cold

最新推荐文章于 2023-10-24 20:19:05 发布

阅读量3k

点赞数 1

分类专栏： Web 前端文章标签： js画线画线画直线两点间直线 JavaScript

本文链接：https://blog.csdn.net/v7911/article/details/117767938

版权

本文介绍了如何使用JavaScript实现从一点到另一点画直线的功能，提供了详细的代码示例，并展示了实际运行效果。

摘要由CSDN通过智能技术生成

代码：

<html>
	<head>
	</head>
	<body>
		<script>
			var f;
			window.onmousedown = function(e) {
				if (undefined == f) {
					f = {
						x : e.clientX,
						y : e.clientY
					}
					createPointer(f.x, f.y);
					return;
				}
				createLine(f.x, f.y, e.clientX, e.clientY);
				f = undefined;
			}
			
			// -------------------------------------- 画线的两个核心函数
			// 在指定位置绘制一个点
			function createPointer(x, y) {
				var html = '<div class="pointer" style="width:2px; height:2px; position:absolute; background:black; border-radius:50%; top:'+y+'px; left:'+x+'px;" ></div>';
				document.body.innerHTML += html;
			}
			// 两点之间画线
			function createLine(aX, aY, bX, bY) {
				createPointer(aX, aY);
				createPointer(bX, bY);
				// 计算出倾斜角
				var tX, tY;
				// 
				var rX, rY;
				if (aX < bX) { // b点在a点的右边

最低0.47元/天解锁文章

coffee_cold

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - demo - 两点之间画线

代码：<html> <head> </head> <body> <script> var f; window.onmousedown = function(e) { if (undefined == f) { f = { x : e.clientX, y : e.clientY } createPointer(f.x, f.y); return;
复制链接

扫一扫