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

红太狼 2022-11-03 10:43 149阅读 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 条评论，149人围观）

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

相关阅读

相关 JS_vue js获取鼠标点击元素对象，vue js点击获取当前元素内容

js点击获取当前元素内容 .html <div onclick="getEvent(event)">click</div> .js function

朱雀/ 2023年01月19日 03:16/ 0 赞/ 337 阅读

相关 js 鼠标点击位置获取

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

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

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

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

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

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

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

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

相关 OpenCV在图像中添加文字，画点，画直线

OpenCV在图像中添加文字，画点，画直线【尊重原创，转载请注明出处】 http://blog.csdn.net/guyuealian/article/deta

淩亂°似流年/ 2022年06月09日 13:37/ 0 赞/ 515 阅读

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

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

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

相关 js 实现点击按钮

需求说明有时候为了更好的用户体验，我们需要js来实现点击按钮的操作 -------------------- html代码 <button type="

你的名字/ 2022年02月20日 08:55/ 0 赞/ 938 阅读

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

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

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

相关 OpenGL鼠标点击事件

include <windows.h> // Windows的头文件 include <gl\gl.h> // OpenGL32库

Love The Way You Lie/ 2021年12月16日 10:19/ 0 赞/ 447 阅读

相关鼠标点击波纹效果

鼠标点击波纹效果 import flash.display.BitmapData; import flash.geom.Rectangle; import flas

绝地灬酷狼/ 2021年11月23日 22:16/ 0 赞/ 442 阅读