使用JS畫圖之點、線、面

 這篇文章主要介紹了使用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>");
}

 

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