突然需要用JavaScritp任意生成直线或者斜线,在网上搜索,很多都是用“|”或者<hr>标记来实现直线,今天终于找到了生成斜线的办法,记录下来,以备不时之需。
JavaScript代码
- var htm = '';
- function mkDiv(x, y, w, h) {
- htm += '<div style="position:absolute;'+
- 'left:' + x + 'px;'+
- 'top:' + y + 'px;'+
- 'width:' + w + 'px;'+
- 'height:' + h + 'px;'+
- 'clip:rect(0,'+w+'px,'+h+'px,0);'+
- 'background-color:#000000' +
- ';"><//div>';
- }
- function mkLin(x1, y1, x2, y2) {
- if(x1 > x2) {
- var _x2 = x2;
- var _y2 = y2;
- x2 = x1;
- y2 = y1;
- x1 = _x2;
- y1 = _y2;
- }
- var dx = x2-x1, dy = Math.abs(y2-y1),
- x = x1, y = y1,
- yIncr = (y1 > y2)? -1 : 1;
- if(dx >= dy) {
- var pr = dy<<1,
- pru = pr - (dx<<1),
- p = pr-dx,
- ox = x;
- while(dx > 0) {
- --dx;
- ++x;
- if(p > 0) {
- mkDiv(ox, y, x-ox, 1);
- y += yIncr;
- p += pru;
- ox = x;
- }
- else p += pr;
- }
- mkDiv(ox, y, x2-ox+1, 1);
- } else {
- var pr = dx<<1,
- pru = pr - (dy<<1),
- p = pr-dy,
- oy = y;
- if(y2 <= y1) {
- while(dy > 0) {
- --dy;
- if(p > 0) {
- mkDiv(x++, y, 1, oy-y+1);
- y += yIncr;
- p += pru;
- oy = y;
- } else {
- y += yIncr;
- p += pr;
- }
- }
- mkDiv(x2, y2, 1, oy-y2+1);
- } else {
- while(dy > 0) {
- --dy;
- y += yIncr;
- if(p > 0) {
- mkDiv(x++, oy, 1, y-oy);
- p += pru;
- oy = y;
- } else p += pr;
- }
- mkDiv(x2, oy, 1, y2-oy+1);
- }
- }
- }
- mkLin(10, 10, 100, 100);
- document.write(htm);
这段代码来自一个叫wz_jsgraphics.js的东东,源文件附在后面了,里面的版权说明是这样的,戒烟如你的英语比较差,看不懂,各位回去自己研究吧:
版权说明内容:
- This notice must be untouched at all times.
- wz_jsgraphics.js v. 3.02
- The latest version is available at
- http://www.walterzorn.com
- or http://www.devira.com
- or http://www.walterzorn.de
- Copyright (c) 2002-2004 Walter Zorn. All rights reserved.
- Created 3. 11. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
- Last modified: 17. 10. 2007
- Performance optimizations for Internet Explorer
- by Thomas Frank and John Holdsworth.
- fillPolygon method implemented by Matthieu Haller.
- High Performance JavaScript Graphics Library.
- Provides methods
- - to draw lines, rectangles, ellipses, polygons
- with specifiable line thickness,
- - to fill rectangles, polygons, ellipses and arcs
- - to draw text.
- NOTE: Operations, functions and branching have rather been optimized
- to efficiency and speed than to shortness of source code.
- LICENSE: LGPL
- This library is free software; you can redistribute it and/or
- modify it under the terms of the GNU Lesser General Public
- License (LGPL) as published by the Free Software Foundation; either
- version 2.1 of the License, or (at your option) any later version.
- This library is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- Lesser General Public License for more details.
- You should have received a copy of the GNU Lesser General Public
- License along with this library; if not, write to the Free Software
- Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA,
- 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">,或者干脆删掉这么一行。