Menggunakan JS untuk melukis mata, garisan dan kemahiran surfaces

Menggunakan JS untuk melukis mata, garisan dan kemahiran surfaces_javascript

WBOY

Lepaskan： 2016-05-16 16:20:55

asal

1513 orang telah melayarinya

Apabila idea lukisan JS terlintas di fikiran saya, saya fikir ia menarik, jadi saya mempraktikkannya. Lukisan JS ialah satu siri artikel, asalnya mengenai titik, garisan dan permukaan

Lihat sampel dahulu: http://www.zhaojz.com.cn/demo/draw5.html

1. Mata

Kami menggunakan tag span untuk mewakili mata di sini

Salin kod Kod adalah seperti berikut:

//Lukis mata, parameter ialah saiz, warna, koordinat dan label titik; jelas sekali parameter opts ialah objek 

fungsi drawPoint(pilihan){

document.write("" (opts.point[2 ]?("" opts .point[2] "
"):"") "");

}

Beberapa parameter:

opts.pw: lebar mata

opts.ph: Ketinggian titik, secara amnya sama dengan opts.pw

opts.color: warna titik

　opts.point: mewakili kedudukan titik, titik[0]: kedudukan mendatar, titik[1]: titik kedudukan menegak[2] ialah label bagi titik

Nota: Atribut kedudukan mestilah mutlak;

2. Garis lurus

Garis lurus terdiri daripada titik, jadi kita perlu melukis n mata antara dua titik. Secara visual, ia adalah garis lurus.

Salin kod Kod adalah seperti berikut:

//Lukis garisan

//pmulakan titik permulaan

//titik tamat penamat

//memilih parameter

fungsi drawLine(pstart, pend, opts){

var ph = 1;

var pw = 1;

var color = "Merah Gelap";

Jika(memilih){

warna = opts.color ? opts.color: color;

}

var cerun; //Cerun

var noSlope = false; //Adakah terdapat cerun

var hdist = pend[0] - pstart[0];

var vdist = pend[1] - pstart[1];

Jika(hdist != 0){

        cerun = Math.abs(vdist/hdist); //Kira cerun

}lain{

         noSlope = true; //Apabila hdist=0, garis lurus tidak mempunyai cerun

}

var gapp = pw > ph : pw;
 
var pepenjuru = Math.sqrt(Math.pow(hdist,2) Math.pow(vdist,2)); //Panjang Hypotenuse

var pn = parseInt(diagonal/gapp); //Kira bilangan mata antara dua titik

Jika(pn < 3){pn=pn*3 1}; //Jika bilangan mata kurang daripada 3, tambahkan bilangan mata mengapa 1, ia adalah untuk memastikan bahawa terdapat sekurang-kurangnya satu mata 
 apabila pn=0
var vgap = Math.abs(vdist)/pn; //Jarak menegak antara dua titik bersebelahan

var hgap = Math.abs(hdist)/pn; //Jarak mendatar antara dua titik bersebelahan

untuk(var i = 0; i< pn ; i ){

                                                                                                                                                                                                                                                                                                                                ality
//hgap Jarak mendatar antara dua titik bersebelahan

//vgap Jarak menegak antara dua titik bersebelahan

​​​​ //hgap*i*(pend[0]
​​​​ //vgap*i*(pend[1]
//(pend[0]
//(pend[1]
​​​​ //(noSlope?0:1) Apabila garis lurus tidak mempunyai kecerunan, offset mendatar ialah 0

        drawPoint({

             pw: pw,

ph: ph,

             warna: warna,

titik: [(hgap*i*(pend[0]
});

}

}

Anda boleh melukis garis poli dan permukaan berdasarkan garisan:

Poliline:

Salin kod Kod adalah seperti berikut:

//Polyline

//ps tatasusunan mata satu dimensi
fungsi drawPolyline(ps){
Jika(ps){
//Lukis garisan
untuk(var i = 0; i              drawLine(ps[i], ps[i 1]);
}
//Lukis titik bengkok
untuk(var i = 0; i              drawPoint({
                 pw: 3,
ph: 3,
                  warna: 'MERAH',
Titik: ps[i]
            });
}

}
}

Poligon:

Salin kod Kod adalah seperti berikut:

//Poligon

//ps tatasusunan mata satu dimensi

fungsi drawPolygon(ps){

Jika(ps){

//Lukis garisan

untuk(var i = 0; i
             drawLine(ps[i], ps[i 1]);

}

//Tutup

Jika(ps.panjang > 2){

             drawLine(ps[ps.length-1], ps[0])

}

​​​​ //Lukis titik bengkok

untuk(var i = 0; i
             drawPoint({

                 pw: 3,

ph: 3,

                  warna: 'MERAH',

Titik: ps[i]

            });

}

}

}

Segi empat tepat:

Salin kod Kod adalah seperti berikut:

//Lukis segi empat tepat

//leftTop Kedudukan titik sudut kiri atas

//lebar lebar

//tinggi tinggi

fungsi drawRectangle(kiriAtas, lebar, tinggi){

drawPolygon([

          kiriAtas,

         [kiriAtas[0], kiriAtas[1] tinggi],

         [leftAtas[0] lebar, kiriAtas[1] tinggi],

[leftAtas[0] lebar, kiriAtas[1]]

]);

//Pelapik

//document.write("");

}

Ternyata JS juga boleh melakukan perkara yang sebegini, saya sangat perlu mengkajinya dengan teliti