使用JS畫圖之點(diǎn)、線、面_javascript技巧

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

一、點(diǎn)

　　這里的點(diǎn)我們使用span標(biāo)簽表示

代碼如下:
//描點(diǎn)，參數(shù)有點(diǎn)的大小，顏色，點(diǎn)的坐標(biāo)和標(biāo)簽; 很明顯opts參數(shù)是一個(gè)對象
function drawPoint(opts){
document.write(""+(opts.point[2]?(""+opts.point[2]+""):"")+"");
}

幾個(gè)參數(shù)：

　　opts.pw: 點(diǎn)的寬度

　　opts.ph: 點(diǎn)的高度， 一般與opts.pw相等

　　opts.color: 點(diǎn)的顏色

　　opts.point: 表示點(diǎn)的位置，point[0]: 水平位置， point[1]: 垂直位置point[2]為點(diǎn)的標(biāo)簽

注意：position屬性，必須為absolute;

二、直線

　　直線是由點(diǎn)組成的嘛，因此我們要在兩點(diǎn)之間描出n多個(gè)點(diǎn)。視覺上，它就是一條直線。

代碼如下:
//畫線
//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] //vgap*i*(pend[1] //(pend[0] //(pend[1] //(noSlope?0:1) 直線沒有斜率時(shí)，水平偏移為0
drawPoint({
pw: pw,
ph: ph,
color: color,
point: [(hgap*i*(pend[0] });
}
}

　　在線的基礎(chǔ)上可以畫出折線和面：

　　折線：

代碼如下:
//折線形
//ps 點(diǎn)的一維數(shù)組
function drawPolyline(ps){
if(ps){
//畫線
for(var i = 0; i drawLine(ps[i], ps[i+1]);
}
//描拐點(diǎn)
for(var i = 0; 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 drawLine(ps[i], ps[i+1]);
}
//使閉合
if(ps.length > 2){
drawLine(ps[ps.length-1], ps[0])
}
//描拐點(diǎn)
for(var i = 0; 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("");
}

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com