JS描画のアイデアが私の脳を通り抜けたとき、私はそれが面白いと感じたので、私はそれを練習しました。 JS図面は一連の記事で、元々はポイント、線、表面に関するものです。
最初に例を見てみましょう：http：//www.zhaojz.com.cn/demo/draw5.html
少し
スパンタグを使用して、ここでポイントを示します
コードコピーは次のとおりです。
//ポイント、色、座標、およびポイントのラベルをスキャンします。 Optsパラメーターがオブジェクトであることは明らかです
関数drawpoint（opts）{
document.write（ "<span id = '"+opts.point [0]+""+opts.point [1]' style = 'display：inline-block; width： "+opts.pw+" px; height： "+opts.ph+" px; "+opts.point [1]+" px; '> "+（opts.point [2]？（" <div style =' position： '> <span style =' position：absolute; left：5px; botton：1px; left; width：width：100px; '> "+opts.point [2]+" </span </span "</span"）： "）
}
いくつかのパラメーター：
opts.pw：ポイントの幅
opts.ph：ポイントの高さは一般にopts.pwに等しい
opts.color：ドットの色
Opts.Point：ポイントの位置を示します、ポイント[0]：水平位置、ポイント[1]：垂直位置ポイント[2]はポイントのラベルです
注：位置属性は絶対でなければなりません。
2。直線
直線はポイントで構成されているため、2ポイントの間にnポイント以上を描画する必要があります。視覚的には、それは直線です。
コードコピーは次のとおりです。
//行を描画します
// PSTARTの開始点
//ペンドエンドポイント
//パラメーターを選択します
関数の描画（pstart、pend、opts）{
var ph = 1;
var pw = 1;
var color = "darkred";
if（opts）{
color = opts.color？ opts.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）; //勾配を計算します
}それ以外{
noslope = true; // hdist = 0の場合、直線には勾配がありません
}
var gapp = pw> ph？ PH：PW; //デフォルトの隣接ポイント間の距離（左上隅のピクセルポイント）
var diganal = math.sqrt（math.pow（hdist、2） + math.pow（vdist、2））; //ハイポテンの長さ
var pn = parseint（対角線/gapp）; // 2つのポイント間のポイント数を計算します
if（pn <3）{pn = pn*3+1}; //ポイント数が3未満の場合、ポイント数を増やします。なぜ+1は、pn = 0のときに少なくとも1つのポイントがあることを確認することです
var vgap = math.abs（vdist）/pn; // 2つの隣接するポイント間の垂直距離
var hgap = math.abs（hdist）/pn; // 2つの隣接するポイント間の水平距離
for（var i = 0; i <pn; i ++）{
//ポイントを描画します
// 2つの隣接するポイント間のHGAP水平距離
// 2つの隣接するポイント間の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、
色：色、
ポイント：[（hgap*i*（pend [0] <pstart [0]？-1：1）*（noslope？0：1）+pstart [0]）、（vgap*（pend [1] <pstart [1]？-1：1）+pstart [1]）]
}）;
}
}
オンラインに基づいてポリラインと表面を描画できます。
ポリライン：
コードコピーは次のとおりです。
// polyline
// PSポイントの1次元配列
関数drawpolyline（ps）{
if（ps）{
//行を描画します
for（var i = 0; i <ps.length-1; i ++）{
ドローライン（ps [i]、ps [i+1]）;
}
//ターニングポイントを回します
for（var i = 0; i <ps.length; i ++）{
drawpoint（{
PW：3、
PH：3、
色：「赤」、
ポイント：ps [i]
}）;
}
}
}
ポリゴン：
コードコピーは次のとおりです。
//ポリゴン
// PSポイントの1次元配列
関数drawpolygon（ps）{
if（ps）{
//行を描画します
for（var i = 0; i <ps.length-1; i ++）{
ドローライン（ps [i]、ps [i+1]）;
}
//閉じた変更
if（ps.length> 2）{
ドローライン（ps [ps.length-1]、ps [0]）
}
//ターニングポイントを回します
for（var i = 0; i <ps.length; i ++）{
drawpoint（{
PW：3、
PH：3、
色：「赤」、
ポイント：ps [i]
}）;
}
}
}
矩形：
コードコピーは次のとおりです。
//長方形を描きます
//左の左隅のポイントの位置を左
//幅
//高い
関数drawrectangle（lefttop、width、high）{
DrawPolygon（[[
残り、
[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：aspolute： "+（lefttop [0] +1）+" px; top： "+1）+"+1）+"+1）
}
JSはそのようなクールなことをすることができ、本当に慎重に勉強する必要があることがわかります