//描點(diǎn)，參數(shù)有點(diǎn)的大小，顏色，點(diǎn)的坐標(biāo)和標(biāo)簽; 很明顯opts參數(shù)是一個(gè)對(duì)象
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>");
}

//畫線
//pstart 起點(diǎn)
//pend 終點(diǎn)
//opts 參數(shù)
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);  //計(jì)算斜率
    }else{
        noSlope = true; //當(dāng)hdist=0時(shí)，直線沒有斜率
    }
    var gapp = pw > ph ? ph : pw; //默認(rèn)相鄰點(diǎn)（左上角的像素點(diǎn)）間的距離
   
    var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //斜邊長度
    var pn = parseInt(diagonal/gapp); //計(jì)算兩點(diǎn)之間的點(diǎn)的數(shù)量
    if(pn < 3){pn=pn*3+1}; //如果點(diǎn)的數(shù)量小于3，則加大點(diǎn)數(shù)；為什么+1呢，是保證pn=0時(shí)至少有一個(gè)點(diǎn)
    var vgap = Math.abs(vdist)/pn; //相鄰兩點(diǎn)間的垂直距離
    var hgap = Math.abs(hdist)/pn; //相鄰兩點(diǎn)間的水平距離
    for(var i = 0; i< pn ; i++){
        //描點(diǎn)
        //hgap 相鄰兩點(diǎn)間的水平距離
        //vgap 相鄰兩點(diǎn)間的垂直距離
        //hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1) 相對(duì)于起點(diǎn)的水平偏移
        //vgap*i*(pend[1]<pstart[1]?-1:1) 相對(duì)于起點(diǎn)的垂直偏移
        //(pend[0]<pstart[0]?-1:1) 水平偏移方向
        //(pend[1]<pstart[1]?-1:1) 垂直偏移方向
        //(noSlope?0:1) 直線沒有斜率時(shí)，水平偏移為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 點(diǎn)的一維數(shù)組
function drawPolyline(ps){
    if(ps){
        //畫線
        for(var i = 0; i<ps.length-1; i++){
            drawLine(ps[i], ps[i+1]);
        }
        //描拐點(diǎn)
        for(var i = 0; i<ps.length; i++){
            drawPoint({
                pw: 3,
                ph: 3,
                color: 'RED',
                point: ps[i]
            });
        }
       
    }
}

//多邊形
//ps 點(diǎn)的一維數(shù)組
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])
        }
        //描拐點(diǎn)
        for(var i = 0; i<ps.length; i++){
            drawPoint({
                pw: 3,
                ph: 3,
                color: 'RED',
                point: ps[i]
            });
        }
    }
}

//畫矩形
//leftTop 左上角的點(diǎn)的位置
//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>");
}