用JavaScript实现使用鼠标画线的示例代码
更新时间：2014年08月19日 17:07:44 投稿：whsnow
用JavaScript实现用鼠标画线，具体步骤是首先是画点，在根据两点坐标画直线，最后是获取鼠标位置,需要的朋友可以参考下
<!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>
相关文章
运用HTML、CSS以及Javascript相关知识，编写多窗口多菜单的内容联动，具体思路及代码如下，感兴趣的朋友可以参考下哈，希望大家有所帮助2013-05-05
简单谈谈offsetleft、offsetTop和offsetParent
这篇文章主要给大家介绍了offsetleft、offsetTop和offsetParent的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了js中this用法,实例分析了this指向windows、指向对象及改变this指向的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JS实现浏览器状态栏文字闪烁效果的方法,通过时间函数定时触发递归调用实现状态栏文字闪烁效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了js实现上传图片预览的方法,通过自定义函数结合onchange方法实现上传图片的预览功能,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS实现iframe中子父页面跨域通讯的方法,结合实例形式分析了JS实现iframe页面跨域通讯常见操作技巧与相关注意事项,需要的朋友可以参考下2020-03-03
遍历所有样式属性，通过判断其属性值，是否为'undefined' 或特特的值，来过虑属性2012-09-09
五段实用的js高级技巧，一些不错的小技巧，学习js的朋友可以看看。2011-12-12
控制台报错:Cannot access 'xxx' before initializatio
这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了JS判断传入函数的参数是否为空(函数参数是否传递),需要的朋友可以参考下2023-05-05
最新评论