Gunakan js untuk melukis bulatan, lengkok dan kemahiran sectors

Gunakan js untuk melukis bulatan, lengkok dan kemahiran sectors_javascript

WBOY

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

asal

2333 orang telah melayarinya

Hubungan antara titik p(x,y) pada bulatan dengan jejari r dan pusat O(x0,y0): x = x0 rcosA y = y0 rsinA, A ialah radian

Sampel: http://www.zhaojz.com.cn/demo/draw6.html

1. Bulatan

Salin kod Kod adalah seperti berikut:

//Bulatan/Elips

//titik titik

//r jejari

//compressionNisbah nisbah mampatan menegak

fungsi drawCircle(titik, r, Nisbah mampatan, data){

var pstart = [titik[0] r, titik[1]]; //Titik permulaan

var pra = pstart;
untuk(var i=0; i < 360; i =5){

rad = i*Math.PI/180; //Kira radian

//r*Math.cos(rad) Offset mendatar bagi titik akhir lengkok berbanding dengan titik

//r*Math.sin(rad) Offset menegak bagi titik akhir lengkok berbanding dengan titik

//compressionNisbah nisbah mampatan menegak

          var cur = [r*Math.cos(rad) dot[0], compressionNisbah*r*Math.sin(rad) dot[1]];

        drawLine(pre,cur);

          pra = cur; //Simpan koordinat titik semasa 

}

DrawLine(pra,pstart);//Tutup

//Lukis titik

drawPoint({

        pw:2,ph:2,warna:'Merah Gelap',titik:titik

});

}

2. Lengkok

Hanya lukis sebahagian daripada bulatan, algoritma adalah serupa dengan bulatan

Salin kod Kod adalah seperti berikut:

//Lukis lengkok

//titik titik

//r jejari

//sudut sudut pusat

//angleOfSlope dan sudut antara paksi-x

//pop sama ada hendak timbul

//tag tajuk

fungsi drawArc(titik, r, sudut, angleOfSlope, pop, tajuk){

var newDot = [titik[0], titik[1]];

var a = (sudutOfSlope angle/2)*Math.PI/180;
If(pop){ //Kira koordinat baharu pusat bulatan

newDot[0] = dot[0] 10*Math.cos(a);

newDot[1] = dot[1] 10*Math.sin(a);

}

Jika(!angleOfSlope){

angleOfSlope = 0;

}

var aos = angleOfSlope*Math.PI/180;

var aos2 = (sudutOfSlope sudut)*Math.PI/180;

var pstart = [newDot[0] r*Math.cos(aos), newDot[1] r*Math.sin(aos)]; //Titik permulaan lengkok

var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)]; //Titik akhir lengkok

var pra = pstart;

for(var i=0; i < sudut; i =2){ //Lukis lengkok dalam julat sudut

         rad = (i angleOfSlope)*Math.PI/180;

        var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];

        drawLine(pre,cur);

          pra = cur;

}

}

3. Bentuk kipas

Sambungkan dua hujung lengkok ke tengah bulatan

Salin kod Kod adalah seperti berikut:

//Sektor

//titik titik

//r jejari

//sudut sudut pusat

//Sudut antara angleOfSlope dan paksi-x menentukan arah sektor 

// sama ada pop timbul, iaitu, sama ada ia menyimpang dari tengah bulatan 

//tag tajuk

fungsi drawSector(titik, r, sudut, angleOfSlope, pop, tajuk){

var newDot = [titik[0], titik[1]];

var a = (sudutOfSlope angle/2)*Math.PI/180;
If(pop){ //Kira koordinat baharu pusat bulatan

newDot[0] = dot[0] 10*Math.cos(a);

newDot[1] = dot[1] 10*Math.sin(a);

}

Jika(!angleOfSlope){

angleOfSlope = 0;

}

var aos = angleOfSlope*Math.PI/180;

var aos2 = (sudutOfSlope sudut)*Math.PI/180;

var pstart = [newDot[0] r*Math.cos(aos), newDot[1] r*Math.sin(aos)]; //Titik permulaan lengkok

var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)]; //Titik akhir lengkok

drawLine(newDot,pstart); //Sambungkan pusat bulatan dan titik permulaan

var pra = pstart;

for(var i=0; i < sudut; i =2){ //Lukis lengkok dalam julat sudut

         rad = (i angleOfSlope)*Math.PI/180;

        var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];

        drawLine(pre,cur);

          pra = cur;

}

drawPolyline([pra, pend, newDot]); //Tutup

//Lukis pusat bulatan

drawPoint({

        pw:2,ph:2,warna:'Merah Gelap',titik:titik

});

// Tag

Jika(tajuk){

document.write("" tajuk "< ;/span>");

}

}

Bukankah ia mengejutkan? Ternyata js boleh melakukan perkara yang hebat. . .