JavaScritp生成斜线代码

突然需要用JavaScritp任意生成直线或者斜线，在网上搜索，很多都是用“|”或者<hr>标记来实现直线，今天终于找到了生成斜线的办法，记录下来，以备不时之需。

JavaScript代码

1. var htm = '';  
2. function mkDiv(x, y, w, h) {  
3.     htm += '<div style="position:absolute;'+  
4.         'left:' + x + 'px;'+  
5.         'top:' + y + 'px;'+  
6.         'width:' + w + 'px;'+  
7.         'height:' + h + 'px;'+  
8.         'clip:rect(0,'+w+'px,'+h+'px,0);'+  
9.         'background-color:#000000' +   
10.         ';"><//div>';  
11. }  
12. function mkLin(x1, y1, x2, y2) {  
13.     if(x1 > x2) {  
14.         var _x2 = x2;  
15.         var _y2 = y2;  
16.         x2 = x1;  
17.         y2 = y1;  
18.         x1 = _x2;  
19.         y1 = _y2;  
20.     }  
21.     var dx = x2-x1, dy = Math.abs(y2-y1),  
22.     x = x1, y = y1,  
23.     yIncr = (y1 > y2)? -1 : 1;  
24.   
25.     if(dx >= dy) {  
26.         var pr = dy<<1,  
27.         pru = pr - (dx<<1),  
28.         p = pr-dx,  
29.         ox = x;  
30.         while(dx > 0) {  
31.             --dx;  
32.             ++x;  
33.             if(p > 0) {  
34.                 mkDiv(ox, y, x-ox, 1);  
35.                 y += yIncr;  
36.                 p += pru;  
37.                 ox = x;  
38.             }  
39.             else p += pr;  
40.         }  
41.         mkDiv(ox, y, x2-ox+1, 1);  
42.     } else {  
43.         var pr = dx<<1,  
44.         pru = pr - (dy<<1),  
45.         p = pr-dy,  
46.         oy = y;  
47.         if(y2 <= y1) {  
48.             while(dy > 0) {  
49.                 --dy;  
50.                 if(p > 0) {  
51.                     mkDiv(x++, y, 1, oy-y+1);  
52.                     y += yIncr;  
53.                     p += pru;  
54.                     oy = y;  
55.                 } else {  
56.                     y += yIncr;  
57.                     p += pr;  
58.                 }  
59.             }  
60.             mkDiv(x2, y2, 1, oy-y2+1);  
61.         } else {  
62.             while(dy > 0) {  
63.                 --dy;  
64.                 y += yIncr;  
65.                 if(p > 0) {  
66.                     mkDiv(x++, oy, 1, y-oy);  
67.                     p += pru;  
68.                     oy = y;  
69.                 } else p += pr;  
70.             }  
71.             mkDiv(x2, oy, 1, y2-oy+1);  
72.         }  
73.     }  
74. }  
75. mkLin(10, 10, 100, 100);  
76. document.write(htm);  

　　这段代码来自一个叫wz_jsgraphics.js的东东，源文件附在后面了，里面的版权说明是这样的，戒烟如你的英语比较差，看不懂，各位回去自己研究吧：

版权说明内容：

1. This notice must be untouched at all times.  
2.   
3. wz_jsgraphics.js    v. 3.02  
4. The latest version is available at  
5. http://www.walterzorn.com  
6. or http://www.devira.com  
7. or http://www.walterzorn.de  
8.   
9. Copyright (c) 2002-2004 Walter Zorn. All rights reserved.  
10. Created 3. 11. 2002 by Walter Zorn (Web: http://www.walterzorn.com )  
11. Last modified: 17. 10. 2007  
12.   
13. Performance optimizations for Internet Explorer  
14. by Thomas Frank and John Holdsworth.  
15. fillPolygon method implemented by Matthieu Haller.  
16.   
17. High Performance JavaScript Graphics Library.  
18. Provides methods  
19. - to draw lines, rectangles, ellipses, polygons  
20.     with specifiable line thickness,  
21. - to fill rectangles, polygons, ellipses and arcs  
22. - to draw text.  
23. NOTE: Operations, functions and branching have rather been optimized  
24. to efficiency and speed than to shortness of source code.  
25.   
26. LICENSE: LGPL  
27.   
28. This library is free software; you can redistribute it and/or  
29. modify it under the terms of the GNU Lesser General Public  
30. License (LGPL) as published by the Free Software Foundation; either  
31. version 2.1 of the License, or (at your option) any later version.  
32.   
33. This library is distributed in the hope that it will be useful,  
34. but WITHOUT ANY WARRANTY; without even the implied warranty of  
35. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU  
36. Lesser General Public License for more details.  
37.   
38. You should have received a copy of the GNU Lesser General Public  
39. License along with this library; if not, write to the Free Software  
40. Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA,  
41. or see http://www.gnu.org/copyleft/lesser.html  

　　这段代码只能控制线条位置和颜色，却不能控制线条粗细，只能回头再研究了。

 　　特别提示：Dreamweaver 8中新建HTML页时，页面开始部分是这样的：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，需要换成：<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">，或者干脆删掉这么一行。