js 实现画一条直线，根据鼠标点击

红太狼 2022-11-03 10:43 164阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>Untitled 1</title>    
<style type="text/css">    
.style1 \{    
    font-size: x-small;    
\}    
</style>   
<script type="text/javascript">    
/\*\*  
    画点  
\*/      
function makedot(x, y)\{   
  pointDiv = "<div style='height:1px;position:absolute;left:" + x +  
      "px;top:" + y + "px;width:1px;background:\#f00;overflow:hidden'></div>";   
  return pointDiv;  
\}   
/\*\*    
  根据两点坐标画直线。    
\*/

function line(x1,y1,x2,y2)\{    
  var slope; //斜率  
  var direction;//坐标运动方向  
  var tx = x2 - x1;  
  var ty = y2 - y1;  
  if(tx == 0 && ty == 0)return;  
  var points = "";  
  var axis;//坐标轴上的坐标  
  if(Math.abs(tx) >= Math.abs(ty))\{//在x轴上移动  
      direction = tx > 0 ? 1 : -1;  
      tx = Math.abs(tx);  
      slope = ty / tx;  
      axis = x1;  
      for(i = 0; i < tx; i ++)\{  
          points += makedot(axis, y1 + i \* slope);  
          axis += direction;  
      \}  
          
  \}else\{//在y轴上移动  
      direction = ty > 0 ? 1 : -1;  
      ty = Math.abs(ty);  
      slope = tx / ty;    
      axis = y1;      
      for(i = 0; i < ty; i ++)\{  
          points += makedot(x1 + i \* slope, axis);  
          axis += direction;  
      \}  
  \}  
  var container = document.getElementById("container");  
  container.innerHTML += points;   
\}   
var oldPoint = null;  
//获取鼠标位置  
function mousePosition(ev)\{  
    ev = ev || window.event;  
    if(ev.pageX || ev.pageY)\{  
        return \{x:ev.pageX, y:ev.pageY\};  
    \}  
    var doc = document.documentElement, body = document.body;  
    var pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);  
    var pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);          
    return \{x:pageX, y:pageY\};  
\}

function recordPoint(ev)\{  
      
    var point = mousePosition(ev);  
    if(oldPoint != null)\{  
        line(oldPoint.x, oldPoint.y, point.x, point.y);  
    \}  
    oldPoint = point;  
\}

</script>  
</head>

<body>    
<div id="container" style="width: 1000px; height: 600px; border:1px \#bfbfbf solid;" οnclick="recordPoint(event);">  
      
</div>  
<script type="text/javascript">   
    line(19,19,22,300);   
</script>  
</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标点击爆炸

> 直接引入以下js文件 function clickEffect() { let balls = []; let long

拼搏现实的明天。/ 2024年04月07日 12:52/ 0 赞/ 111 阅读

相关 python 实现鼠标点击程序

可以使用 Python 的 pyautogui 库来实现鼠标点击程序。安装方法：pip install pyautogui。示例代码如下： import pyaut

叁歲伎倆/ 2024年03月25日 11:35/ 0 赞/ 29 阅读

相关模拟鼠标点击

< DOCTYPE HTML PUBLIC -WCDTD HTML TransitionalEN> <table style="WIDTH: 100%; TABLE-LAYO

痛定思痛。/ 2023年10月18日 08:13/ 0 赞/ 184 阅读

相关 js原生实现鼠标点击元素复制指定的内容

js原生实现鼠标点击元素复制指定的内容:直接看代码吧: <!DOCTYPE html> <html lang="en"> <head> <m

向右看齐/ 2023年08月17日 15:49/ 0 赞/ 159 阅读

相关 svg.js svg鼠标点击绘制直线

需求；鼠标点击下去后确定直线起始点，鼠标移动后直线会随之绵延，鼠标松开则直线绘制完成源码： <!doctype html> <html> <hea

女爷i/ 2023年06月07日 10:40/ 0 赞/ 19 阅读

相关 js 鼠标点击位置获取

event.offsetY/X 众所周知event.offsetX可以获取鼠标点击位置距包含元素的左边界距离今天做项目的时候需要用到距离就研究一番这一堆函数

本是古典何须时尚/ 2022年11月28日 15:29/ 0 赞/ 253 阅读

相关 js 实现画一条直线，根据鼠标点击

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

红太狼/ 2022年11月03日 10:43/ 0 赞/ 165 阅读

相关 JS实现在鼠标点击位置创建弹窗

JS实现在鼠标点击位置创建弹窗前言功能预览代码详情备注前言最近在做一个功能，当鼠标进行点击事件时，在鼠标所在位置创建一个弹窗出

雨点打透心脏的1/2处/ 2022年10月29日 07:52/ 0 赞/ 367 阅读

相关 js模拟点击坐标、鼠标轨迹

<!doctype html> <html lang="en"> <head> <meta charset="utf-8">

客官°小女子只卖身不卖艺/ 2022年02月26日 05:52/ 0 赞/ 1123 阅读

相关 js实现禁用，鼠标不可点击

本文所讲的禁用针对的是没有disable属性的元素，如div、li标签等，有该属性的元素如input、button标签等需要禁用可直接对此属性进行设置。鼠标不可点击主要是

古城微笑少年丶/ 2022年01月22日 04:37/ 0 赞/ 983 阅读