Sample Code for drawing lines with the mouse using JavaScript
| 01 |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 02 |
<Html xmlns = "http://www.w3.org/1999/xhtml"> |
| 05 |
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> |
| 06 |
<Title> Untitled 1 </title> |
| 07 |
<Style type = "text/css"> |
| 12 |
<Script type = "text/javascript"> |
| 16 |
Function makedot (x, y ){ |
| 17 |
PointDiv = "<div style = 'height: 1px; position: absolute; left:" + x + |
| 18 |
"Px; top:" + y + "px; width: 1px; background: # f00; overflow: Den den '> </div> "; |
| 22 |
Draw a straight line based on two-point coordinates. |
| 25 |
Function line (x1, y1, x2, y2 ){ |
| 27 |
Var direction; // Coordinate motion direction |
| 30 |
If (tx = 0 & ty = 0) return; |
| 32 |
Var axis; // coordinates on the coordinate axis |
| 33 |
If (Math. abs (tx)> = Math. abs (ty) {// move on the X axis |
| 34 |
Direction = tx> 0? 1:-1; |
| 38 |
For (I = 0; I <tx; I ++ ){ |
| 39 |
Points + = makedot (axis, y1 + I * slope ); |
| 43 |
} Else {// move on the Y axis |
| 44 |
Direction = ty> 0? 1:-1; |
| 48 |
For (I = 0; I <ty; I ++ ){ |
| 49 |
Points + = makedot (x1 + I * slope, axis ); |
| 53 |
Var container = document. getElementById ("container "); |
| 54 |
Container. innerHTML + = points; |
| 57 |
// Obtain the mouse position |
| 58 |
Function mousePosition (ev ){ |
| 59 |
Ev = ev | window. event; |
| 60 |
If (ev. pageX | ev. pageY ){ |
| 61 |
Return {x: ev. pageX, y: ev. pageY }; |
| 63 |
Var doc = document.doc umentElement, body = document. body; |
| 64 |
Var pageX = event. clientX + (doc & doc. scrollLeft | body & body. scrollLeft | 0)-(doc & doc. clientLeft | body & body. clientLeft | 0 ); |
| 65 |
Var pageY = event. clientY + (doc & doc. scrollTop | body & body. scrollTop | 0)-(doc & doc. clientTop | body & body. clientTop | 0 ); |
| 66 |
Return {x: pageX, y: pageY }; |
| 69 |
Function recordPoint (ev ){ |
| 71 |
Var point = mousePosition (ev ); |
| 72 |
If (oldPoint! = Null ){ |
| 73 |
Line (oldPoint. x, oldPoint. y, point. x, point. y ); |
| 81 |
<Div id = "container" style = "width: 1000px; height: 600px; border: 1px # bfbfbf solid;" onclick = "recordPoint (event);"> |
| 84 |
<Script type = "text/javascript"> |
