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はそのようなクールなことをすることができ、本当に慎重に勉強する必要があることがわかります