Menggunakan JS untuk melukis mata, garisan dan kemahiran surfaces_javascript

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn