首页 > 代码库 > 使用JavaScript实现使用鼠标画线的效果

使用JavaScript实现使用鼠标画线的效果

2024-07-16 05:53:39   212人阅读

<!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;" onclick="recordPoint(event);">    </div><script type="text/javascript">     //line(19,19,22,300); </script></body>  </html>

 


联系
我们