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;}/** 函数功能：根据给定的圆心和半径画圆 函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。 */ function circle(x,y,r){ //(x,y)圆心，r半径 var dotx,doty,radio; var Pi = Math.PI; var points = ""; points += makedot(x, y); for(var i = 0;i < 360;i += 0.5){ radio = i * Pi / 180; dotx = r * Math.cos(radio) + x; doty = r * Math.sin(radio) + y points += makedot(dotx, doty); } var container = document.getElementById("container"); container.innerHTML = points; }/** 函数功能：根据指点矩形左上角坐标及长宽绘制矩形。 函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标 */ function rect(x,y,w,h){ //(x,y)左上角坐标,w,h 宽与高 var points = ""; for(var i = 0;i < w;i ++){ points += makedot(x + i,y); points += makedot(x + i,y + h); } for(var i = 0;i < h;i ++){ points += makedot(x, y + i); points += makedot(x + w, y + i); } var container = document.getElementById("container"); container.innerHTML = points;}/**获取鼠标位置*/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};}//开始点坐标var startPoint = null;//记录鼠标事件var moveEvent;var upEvent;/**记录开始点，注册鼠标事件*/function recordPoint(ev){var point = mousePosition(ev);startPoint = point;moveEvent = document.body.onmousemove;upEvent = document.body.onmouseup;if(document.getElementById("circle").checked){document.body.onmousemove = drawCircle;}else {document.body.onmousemove = drawRect;}document.body.onmouseup = endDraw;}/**画圆形*/function drawCircle(ev){var point = mousePosition(ev);var tx = point.x - startPoint.x;var ty = point.y - startPoint.y;tx *= tx;ty *= ty;var r = Math.sqrt(tx + ty);circle (startPoint.x, startPoint.y, r);}/**画矩形*/function drawRect(ev){var point = mousePosition(ev); rect(startPoint.x, startPoint.y, Math.abs(point.x - startPoint.x), Math.abs(point.y - startPoint.y));}/**结束动作*/function endDraw(){document.body.onmousemove = moveEvent;document.body.onmouseup = upEvent;}</script></head> <body> <input type="radio" id="circle" name="type" value="1" checked/>圆<input type="radio" name="type" value="2" />矩形<div id="container" style="width: 1000px; height: 600px; border:1px #bfbfbf solid;" onmousedown="recordPoint(event);" ></div></body> </html>