JS を使用して点、線、面を描画する_JavaScript スキル

JS描画のアイデアが頭に浮かんだとき、面白そうだったので実践してみました。 JS 描画は点、線、面に関する一連の記事です

最初にサンプルを見てください: http://www.zhaojz.com.cn/demo/draw5.html

1.ポイント

ここでは、span タグを使用してポイントを表します

コードをコピーします コードは次のとおりです:

// 点を描画します。パラメータは点のサイズ、色、座標、ラベルです。明らかに opts パラメータはオブジェクトです
; 関数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] は点のラベルです

注: 位置属性は絶対でなければなりません。

2. 直線

直線は点で構成されているため、2 点の間に n 個の点を描く必要があります。視覚的には直線です。

コードをコピー コードは次のとおりです:

//線を描く
//p開始点
//エンドポイントをペンド
//パラメータを選択します
functiondrawLine(pstart, pend, opts){
var ph = 1;
var pw = 1;
var color = "DarkRed";
If(opts){
color = opts.color ? opts.color: color;
}
var の傾き; //傾き
var noSlope = false //傾斜はありますか
var hdist = pend[0] - pstart[0];
var vdist = pend[1] - pstart[1];
If(hdist != 0){
slope = Math.abs(vdist/hdist) //傾きを計算します
; }その他{
noSlope = true; // hdist=0 の場合、直線には傾きがありません
}
var gapp = pw > ? ph : pw; // 隣接する点間のデフォルトの距離 (左上隅のピクセル)
var 対角線 = Math.sqrt(Math.pow(hdist,2) Math.pow(vdist,2)) //斜辺の長さ
var pn = parseInt(diagonal/gapp) // 2 点間の点の数を計算します
If(pn pn=0の場合 var vgap = Math.abs(vdist)/pn; //隣接する 2 点間の垂直距離
var hgap = Math.abs(hdist)/pn; //隣接する 2 点間の水平距離
for(var i = 0; i アリティ //hgap 隣接する 2 点間の水平距離
//vgap 隣接する 2 点間の垂直距離
//hgap*i*(pend[0] //vgap*i*(pend[1] //(pend[0] //(pend[1] //(noSlope?0:1) 直線に傾きがない場合、水平オフセットは 0
drawPoint({
pw: pw,
ふ: ふ、
カラー: カラー、
ポイント: [(hgap*i*(pend[0] });
}
}

ポリラインとサーフェスは線に基づいて描画できます:

ポリライン:

コードをコピーします コードは次のとおりです:

//ポリライン

//ps 点の 1 次元配列
関数drawPolyline(ps){
もし(ps){
//線を描く
for(var i = 0; i drawLine(ps[i], ps[i 1]);
}
//変曲点を描画
for(var i = 0; i drawPoint({
pw: 3、
ph: 3、
カラー: 'RED'、
ポイント: ps[i]
});
}

}
}

ポリゴン:

コードをコピーします コードは次のとおりです:

//ポリゴン
//ps 点の 1 次元配列
関数drawPolygon(ps){
もし(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、
カラー: 'RED'、
ポイント: ps[i]
});
}
}
}

長方形:

コードをコピーします コードは次のとおりです:

//長方形を描画します
//leftTop 左上隅の点の位置
//幅幅
//高い高い
functiondrawRectangle(leftTop, width, high){
drawPolygon([
左上、
[leftTop[0]、leftTop[1] 高]、
[leftTop[0] 幅、leftTop[1] 高]、
[leftTop[0] 幅, leftTop[1]]
]);
//パディング
//document.write("");
}

JS でもこのような素晴らしいことができることがわかりました。注意深く研究する必要があります