用JavaScript实现使用鼠标画线的示例代码

时间：2021-05-18

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章