JS画几何图形之一【直线】

JS画图的想法经过大脑的时候，觉得有点意思，所以就实践了一番。JS画图为系列文章，本是讲点、线和面

先看样例：http://www.zhaojz.com.cn/demo/draw5.html

一、点

　　这里的点我们使用span标签表示

//描点，参数有点的大小，颜色，点的坐标和标签; 很明显opts参数是一个对象function drawPoint(opts){    document.write("<span id='"+opts.point[0]+""+opts.point[1]+"' style='display: inline-block; width: "+opts.pw+"px; height: "+opts.ph+"px; background-color: "+opts.color+"; position: absolute "+opts.point[0]+"px; top: "+opts.point[1]+"px;'>"+(opts.point[2]?("<div style='position: relative;'><span style='position: absolute; left: 5px; bottom: 1px; text-align: left; width: 100px;'>"+opts.point[2]+"</span></div>"):"")+"</span>");}

几个参数：

　　opts.pw: 点的宽度

　　opts.ph: 点的高度， 一般与opts.pw相等

　　opts.color: 点的颜色

　　opts.point: 表示点的位置，point[0]: 水平位置， point[1]: 垂直位置point[2]为点的标签

注意：position属性，必须为absolute;

二、直线

　　直线是由点组成的嘛，因此我们要在两点之间描出n多个点。视觉上，它就是一条直线。

//画线//pstart 起点//pend 终点//opts 参数function drawLine(pstart, pend, opts){    var ph = 1;    var pw = 1;    var color = "DarkRed";    if(opts){        color = opts.color ? opts.color: color;    }    var slope; //斜率    var noSlope = false; //是否有斜率    var hdist = pend[0] - pstart[0];    var vdist = pend[1] - pstart[1];    if(hdist != 0){        slope =  Math.abs(vdist/hdist);  //计算斜率    }else{        noSlope = true; //当hdist=0时，直线没有斜率    }    var gapp = pw > ph ? ph : pw; //默认相邻点（左上角的像素点）间的距离        var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //斜边长度    var pn = parseInt(diagonal/gapp); //计算两点之间的点的数量    if(pn < 3){pn=pn*3+1}; //如果点的数量小于3，则加大点数；为什么+1呢，是保证pn=0时至少有一个点    var vgap = Math.abs(vdist)/pn; //相邻两点间的垂直距离    var hgap = Math.abs(hdist)/pn; //相邻两点间的水平距离    for(var i = 0; i< pn ; i++){        //描点        //hgap 相邻两点间的水平距离        //vgap 相邻两点间的垂直距离        //hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1) 相对于起点的水平偏移        //vgap*i*(pend[1]<pstart[1]?-1:1) 相对于起点的垂直偏移        //(pend[0]<pstart[0]?-1:1) 水平偏移方向        //(pend[1]<pstart[1]?-1:1) 垂直偏移方向        //(noSlope?0:1) 直线没有斜率时，水平偏移为0        drawPoint({            pw: pw,            ph: ph,            color: color,            point: [(hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1)+pstart[0]),(vgap*i*(pend[1]<pstart[1]?-1:1)+pstart[1])]        });    }}

　　在线的基础上可以画出折线和面：

　　折线：

//折线形//ps 点的一维数组function drawPolyline(ps){    if(ps){        //画线        for(var i = 0; i<ps.length-1; i++){            drawLine(ps[i], ps[i+1]);        }        //描拐点        for(var i = 0; i<ps.length; i++){            drawPoint({                pw: 3,                ph: 3,                color: 'RED',                point: ps[i]            });        }            }}

　　多边形：

//多边形//ps 点的一维数组function drawPolygon(ps){    if(ps){        //画线        for(var i = 0; i<ps.length-1; i++){            drawLine(ps[i], ps[i+1]);        }        //使闭合        if(ps.length > 2){            drawLine(ps[ps.length-1], ps[0])        }        //描拐点        for(var i = 0; i<ps.length; i++){            drawPoint({                pw: 3,                ph: 3,                color: 'RED',                point: ps[i]            });        }    }}

　　矩形：

//画矩形//leftTop 左上角的点的位置//width 宽//high 高function drawRectangle(leftTop, width, high){    drawPolygon([        leftTop,        [leftTop[0], leftTop[1]+high],        [leftTop[0]+width, leftTop[1]+high],        [leftTop[0]+width, leftTop[1]]    ]);    //填充    //document.write("<span style='height: "+(high-1)+"px; width: "+(width-1)+"px; background-color: "+"Green"+"; position: absolute; left:"+(leftTop[0]+1)+"px; top: "+(leftTop[1]+1)+"'></span>");}