<!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实现用鼠标画线,具体步骤是首先是画点,在根据两点坐标画直线,最后是获取鼠标位置,需要的朋友可以参考下
纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要...3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点移动保持连接状态 6、附带节点鼠标右键弹出自定义菜单代码
CSS3鼠标滑过动画线条边框特效.zip
css3鼠标悬停按钮线条动画效果代码.zip
MouseCanvasExp 只是围绕画布,鼠标和曲线动画的实验而已...
实例213 表格作为分割线 332 实例214 表格向下展开 332 第8章 图形图像与多媒体 335 8.1 图片大小 336 实例215 打开自定义大小的图片 336 实例216 图片放大缩小 337 实例217 通过鼠标滚轮放大缩小图片 338 8.2 图片...
实例330 应用删除线样式标记商品特价 527 实例331 在文字上方标注说明标记 528 实例332 指定图标的列表项 529 13.5 文字滤镜特效 530 实例333 文字的发光效果 531 实例334 文字的阴影效果 532 实例335 ...
SuperMap iClient 6R for JavaScript 本实例演示了如何添加marker的点,线,面
其实就是搞清做什么,怎么做的问题,先把流程图画出来,拆解开,一个个做好了然后再合并。理论的东西我不会讲,直接举例哈! <script type="text/javascript"> function g(o){return document.getElementById(o);}...
通过此工具用户可以在地图任意位置上画点、画线、画面并显示线的距离及面的面积
实现网页 CAD 绘制任意线的功能,需要使用 H5 的 Canvas 元素和 JavaScript 编程语言。在 HTML 页面中,创建一个 Canvas 元素作为画布,设置其宽度和高度。在 JavaScript 代码中,获取 Canvas 对象,并调用其 ...
图像 单独的按钮组 保存... 形状(画线、画圆圈、画方框、画三角形、画圆形、画方形) 粗细 (线宽只能选取一个) 1px、3px、5px、8px 颜色 (颜色只能选取一种) 红、绿、蓝、黄、白、黑、粉色、紫色、青色、橙色
这是一款效果非常炫酷的js对角线轮播图特效。该特效切换轮播图的方式为往左上角移动,每个轮播图项可以全屏展开,并且缩略图带有鼠标悬停动画效果。
通过从画板的开始到结尾画线来解决难题。 拼图中的不同符号对于如何绘制线条具有不同的规则。 弄清楚这些符号对解决每个难题的意义。 建于 HTML5画布,CSS,JavaScript 线算法 Obelus中的线条必须易于绘制,这意味着...
HoverSlippery是一款可以制作导航超链接鼠标滑过动画特效的jQuery插件。该插件可以制作4种鼠标滑过效果,分别是:胶囊跟随效果,双线跟随效果,下划线跟随效果和上划线跟随效果。
使用很多移动的白色小点代表星星,两个星星在一定距离内会有白线连接,白线透明度根据距离增大或缩小实现圆滑,鼠标也代表一颗星星
实现DIV与DIV之间的连线,工程...我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
打开运行,在框内点击鼠标,出现几个点后按n、b或者r键就可以画图形了