使用JS畫圖之點、線、面_javascript技巧

JS畫圖的想法經過大腦的時候，覺得有點意思，所以就實踐了一番。 JS畫圖為系列文章，本是講點、線和麵

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

一、點

　　這裡的點我們使用span標籤表示

複製程式碼 程式碼如下:

//描點，參數有點的大小，顏色，點的座標和標籤; 很明顯opts參數是一個物件
function drawPoint(opts){
document.write("" (opts.point[2]? ("

" opts.point[2] "

"):"") "");
}

 幾個參數：

　　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     var vgap = Math.abs(vdist)/pn; //相鄰兩點間的垂直距離
    var hgap = Math.abs(hdist)/pn; //相鄰兩點間的水平距離
    for(var i = 0; i         //描點
        //hgap 鄰近兩點間的水平距離
        //vgap 鄰近兩點間的垂直距離
        //hgap*i*(pend[0]         //vgap*i*(pend[1]         //(pend[0]         //(pend[1]         //(noSlope?0:1) 直線沒有斜率時，水平偏移為0
        drawPoint({
            pw: pw,
            ph: ph,
            color: color,
分: [(hgap*i*(pend[0]         });
    }
}

　　在線的基礎上可以畫出折線和麵：

　　折線：

複製程式碼 程式碼如下:

//折線形
//ps 點的一維數組
function drawPolyline(ps){
    if(ps){
        //畫線
        for(var i = 0; i             drawLine(ps[i], ps[i 1]);
        }
        //描拐點
        for(var i = 0; i             drawPoint({
                pw: 3,
                ph: 3,
                color: 'RED',
                point: ps[i]
            });
        }
       
    }
}

 　　多邊形：

複製程式碼 程式碼如下:

//多邊形
//ps 點的一維數組
function drawPolygon(ps){
    if(ps){
        //畫線
        for(var i = 0; i             drawLine(ps[i], ps[i 1]);
        }
        //使閉合
        if(ps.length > 2){
            drawLine(ps[ps.length-1], ps[0])
        }
        //描拐點
        for(var i = 0; 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("");
}

原來JS也可以做這麼酷炫的事情，真是要好好研究下了