<!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></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> </div> <script type="text/javascript"> //line(19,19,22,300); </script> </body> </html>
用JavaScript实现使用鼠标画线的示例代码
内容版权声明：除非注明，否则皆为本站原创文章。