Gunakan js untuk melukis bulatan, lengkok dan kemahiran sectors_javascript

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. . .

Kenyataan：

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