<!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>

使用JavaScript实现使用鼠标画线的效果的更多相关文章

  1. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Open Cascade：使用鼠标画线

    Open Cascade:使用鼠标画线 在View类文件中创建以下代码: 1.创建鼠标消息: afx_msg void OnLButtonDown(UINT nFlags, CPoint point) ...

  3. WPF 画线动画效果实现

    原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...

  4. 完整的html+css+javascript实现跟随鼠标移动显示选中效果

    1,显示效果: 2,html结构 <div class="process_list-lpu"> <div class="process_line&quo ...

  5. 画线动画——SVG版和纯CSS版

    概述 我们常常在网站中看到一些画线的动画效果,非常炫酷,大多数这种画线动画效果是通过SVG实现的,也有不少是用纯css实现的,下面我总结了一下这2种方法,供以后开发时参考,相信对其他人也有用. 参考资 ...

  6. ArcGIS API for JavaScript根据两个点坐标在地图上画线

    ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...

  7. 纯JS画点、画线、画圆的方法

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

  8. H5中画图标签Canvas---画矩形，画线，画圆，渐变色，图形载入

    一: 1.鼠标监视坐标值 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>canvas的演示< ...

  9. MFC画线功能总结

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6216464.html MFC画线功能要点有二:其一,鼠标按下时记录初始位置为线的起始 ...

随机推荐

  1. Sqlserver学习研究

    关注关键词 :Sqlserver实用工具配置步骤 1)创建实用工具控制点(UCP) 2)连接到现有UCP 3)相UCP注册SQL Server实例 4)创建数据层应用程序 5)设置资源运行状况策略 6 ...

  2. Java中的生产者、消费者问题

    Java中的生产者.消费者问题描述: 生产者-消费者(producer-consumer)问题, 也称作有界缓冲区(bounded-buffer)问题, 两个进程共享一个公共的固定大小的缓冲区(仓库) ...

  3. 使用git下载编译erlang

    git clone https://github.com/erlang/otp cd otp git tag git checkout -b OTP- OTP- ./otp_build all exp ...

  4. 模拟jq的设置样式

    //需求,创建一个div,添加到页面上,给div添加属性 //面向对象开发,构造函数创建类 function divTag(){ this.div1=document.createElement('d ...

  5. 7. 由一道ctf学习变量覆盖漏洞

    0×00 背景 近期在研究学习变量覆盖漏洞的问题,于是就把之前学习的和近期看到的CTF题目中有关变量覆盖的题目结合下进一步研究. 通常将可以用自定义的参数值替换原有变量值的情况称为变量覆盖漏洞.经常导 ...

  6. java 父类的引用调用自己的属性 但是调用的方法必须是重写过的父类的方法 因为编译时候把他当作父类 运行时候才是他自己 所以必须重写父类得方法

  7. 堆模板（pascal）洛谷P3378

    题目描述 如题,初始小根堆为空,我们需要支持以下3种操作: 操作1: 1 x 表示将x插入到堆中 操作2: 2 输出该小根堆内的最小数 操作3: 3 删除该小根堆内的最小数 输入输出格式 输入格式: ...

  8. 【bzoj3119】Book 数学

    题目描述 一个长度为N的序列的首项为X,以后的每一项要么比前一项大A,要么比前一项小B.已知总和为M,求一组可行方案. 输入 第一行一个正整数N.第二行四个整数依次是X,A,B,M. 输出 输出一行N ...

  9. 转---秒杀多线程第十二篇 多线程同步内功心法——PV操作上 （续）

    PV操作的核心就是 PV操作可以同时起到同步与互斥的作用. 1.同步就是通过P操作获取信号量,V操作释放信号量来进行. 2.互斥其实就是,同时操作P操作,结束后进行V操作即可做到. Java上实现PV ...

  10. 【三】shiro入门 之 Realm

    Realm:域,Shiro 从从Realm获取安全数据(如用户.角色.权限),就是说SecurityManager要验证用户身份,那么它需要从Realm获取相应的用户进行比较以确定用户身份是否合法:也 ...