js实现两点之间画线的方法

本文实例讲述了js实现两点之间画线的方法。分享给大家供大家参考。具体分析如下：

最近有点无聊，琢磨了很久，想到了一消磨时间的点子，也就是做js版的连连看。

两点之间画线也只是连连看最基本功能的一部分，所以我画的线也仅是折线，而且还只能向左折，后面将根据连连看中图片位置点来确定折线的方向。

<!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=gb2312" />
<title>两点之间画折线</title>
<style type="text/css">
body{
 font-size:12px;
}
</style>
</head>
<script type="text/javascript">
<!--
var dot=new Array();
document.onmousedown =function(a)
{
 //若div存在，则删除
 if(document.getElementById('line_div')){
 var clearDiv=document.getElementById("line_div");
 clearDiv.parentNode.removeChild(clearDiv);
 }
 //按下时创建一个事件
 if(!a) a=window.event;
 //获取x轴、y轴坐标
 var x=a.clientX;
 var y=a.clientY;
 //当数组长度大于等于4时，清空数组
 if(dot.length>=4) dot.splice(0,4);
 //将x、y添加到数组中,数组中保存了两组坐标值，相当于页面上的A(x1,y1)、B(x2,y2)两点
 dot.push(x,y);
 //当数组长度为4时，画线。
 if(dot.length==4){
 //计算div的长和宽
 var width=Math.abs(dot[0]-dot[2]);
 var height=Math.abs(dot[1]-dot[3]);
 //在页面上定位div左上角的具体位置
 var left=dot[0]-dot[2]<0?dot[0]:dot[2];
 var top=dot[1]-dot[3]<0?dot[1]:dot[3];
 //创建div
 var div=document.createElement("div");
 div.innerHTML=' <div id="line_div" style="width:'+width+'px;height:'+height+'px;position:absolute;visibility:visible;left:'+left+'px;top:'+top+'px;border-left:1px solid #cdcdcd;border-top:1px solid #cdcdcd;"></div>';
 document.body.appendChild(div);
 }
}
-->
</script>
<body>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 纯JS 绘制数学函数

    绘图对象Plot,包含了JS画点,JS画线,JS画正弦sin,JS画余弦cos,tan,圆,多边形. 可设置原点位置,画笔颜色,画笔粗细,坐标线颜色. 其实原理很简单,用长1px宽1px的div模拟点,由点及线,由线及面. 贴上来权当相互学习,以免JS新手觉得js画图是多神秘的事情. JS绘制数学函数图 body{ margin: 0px; padding: 0px; } //辅助函数 function $(id){return document.getElementById(id)}; /**

  • 使用js在页面中绘制表格核心代码

    使用js在页面中绘制表格核心代码

    1.先写一个<table>,中间放入<tbody>,但是<tbogy>什么也不加  如何使用js在页面中绘制表格 2.在js中写入方法,绘制表格  如何使用js在页面中绘制表格 其核心语句就是: var row=document.createElement_x("tr"); 就是创建行 var cell=document.createElement_x("td"); 就是创建列 cell.appendChild(document.

  • raphael.js绘制中国地图 地图绘制方法

    raphael.js绘制中国地图 地图绘制方法

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • JS画线(实例代码)

    IE下画线 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml&quo

  • js实现两点之间画线的方法

    本文实例讲述了js实现两点之间画线的方法.分享给大家供大家参考.具体分析如下: 最近有点无聊,琢磨了很久,想到了一消磨时间的点子,也就是做js版的连连看. 两点之间画线也只是连连看最基本功能的一部分,所以我画的线也仅是折线,而且还只能向左折,后面将根据连连看中图片位置点来确定折线的方向. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

  • Delphi下OpenGL2d绘图之画线的方法

    一.前言: Delphi画线方法与画点基本上是相同的.区别在于glBegin()的参数.绘制的框架代码可以参考Delphi下OpenGL2d绘图初始化中的代码,地址为http://www.jb51.net/article/52141.htm.修改的部份为 Draw 函数的内容. 二.画线步骤: GL_LINES:把每一个顶点作为一个独立的线段,顶点2n-1和2n之间共定义了n条线段,总共绘制N/2条线段 GL_LINE_STRIP:绘制从第一个顶点到最后一个顶点依次相连的一组线段,第n和n+1个

  • python matplotlib 在指定的两个点之间连线方法

    为了找到matplotlib在两个点之间连线的方法真是费了好大功夫,最后还是决定用简单的 plt.plot 来解决.如果有好多对点,则可以通过循环实现连接,还可以用 plt.arrow 画箭头,具体可参考这里 import matplotlib.pyplot as plt x = [[1, 3], [2, 5]] # 要连接的两个点的坐标 y = [[4, 7], [6, 3]] for i in range(len(x)): plt.plot(x[i], y[i], color='r') pl

  • matplotlib绘制两点间连线的几种方法实现

    matplotlib绘制两点间连线的几种方法实现

    目录 绘制方法<1> 绘制方法<2>使用pyplot绘制图像 绘制方法<3>使用axes类绘制图像 绘制方法<4>使用figure类绘制图像 为了找到matplotlib在两个点之间连线的方法真是费了好大功夫,本文主要介绍了 matplotlib绘制两点间连线的几种方法,具体如下 绘制方法 <1> 本文将通过最简单的模式拆解Matplotlib绘图的几个组成部分,将cover以下内容1. Create a dataset2. Create a c

  • opengl实现任意两点间画圆柱体

    opengl实现任意两点间画圆柱体

    本文实例为大家分享了opengl实现任意两点间画圆柱体的具体代码,供大家参考,具体内容如下 1.问题提出 两点间画线简单: glBegin(GL_LINES);  //注意是LINES不是LINE,这个错误一定要注意. glVertexf(x1, y1, z1); glVertexf(x2, y2, z2); glEnd(); 画线函数不会影响opengl的矩阵堆栈. 但是很多时候线条效果会比较差,比如我要做一个骨骼动画,关节点间的骨头用线条太难看,即使使用glLineWidth设置线宽,视觉效

  • Python使用pylab库实现画线功能的方法详解

    Python使用pylab库实现画线功能的方法详解

    本文实例讲述了Python使用pylab库实现画线功能的方法.分享给大家供大家参考,具体如下: pylab 提供了比较强大的画图功能,但是函数和参数都比较多,很容易搞混.我们平常使用最多的应该是画线了.下面,简单的对一些常用的划线函数进行了封装,方便使用. # -*- coding: utf-8 -*- import pylab import random class MiniPlotTool : ''' A mini tool to draw lines using pylab ''' bas

  • python 画二维、三维点之间的线段实现方法

    如下所示: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot as plt # 打开画图窗口1,在三维空间中绘图 fig = plt.figure(1) ax = fig.gca(projection='3d') # 给出点(0,0,0)和(100,200,300) x = [0, 100] y = [0, 200] z = [0, 300] # 将数组中的前两个点进行连线 figure = ax.plot(x, y

  • js计算任意值之间随机数的方法

    本文实例讲述了js计算任意值之间随机数的方法.分享给大家供大家参考.具体实现方法如下: 首先:Math.random()这个方法就是计算随机数的返回大于等于0小于1的随机数, Math.random()*10岂不是返回大于等于0返回小于10吗,但是他只能返回小于10的数,不能返回10,怎么办呢,我们在原来的函数上再加1就变成了Math.random()*10+1;此时就可以返回1到10的随机数了,但是我们返回的很多是小数,不符合要求,下面就用到了Math.floor()这个函数了,这个函数执行向

  • Java拖曳鼠标实现画线功能的方法

    本文实例主要实现Java拖曳鼠标画线的功能,为了达到画线的功能,分别用implements MouseListener与MouseMotionListener,并且由mousePressed(),mouseReleased()取得鼠标拖曳的开始与结束坐标.这是一个掌握Java鼠标事件的很好的范例. 具体实现代码如下: import java.awt.*; import java.awt.event.*; import javax.swing.*; public class MouseDemo e

  • js实现获取两个日期之间所有日期的方法

    本文实例讲述了js实现获取两个日期之间所有日期的方法.分享给大家供大家参考,具体如下: <script> function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp[1],temp[2]); return date; } var start = "2012-3-25"; var end = "2012-4-3";

随机推荐