Gunakan JS untuk menggambar lingkaran, busur, dan bentuk kipas

Hubungan antara titik P (x, y) pada lingkaran dengan jari -jari R dan pusat lingkaran O (x0, y0): x = x0+rcosa; y = y0+rsina, a adalah radian

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

1. Lingkaran

Salinan kode adalah sebagai berikut:

// Circle/Ellipse

// dot dot

// R radius

// rasio kompresi vertikal kompresi

function drawcircle (dot, r, compressionratio, data) {

var pStart = [dot [0]+r, dot [1]]; // Mulai Titik

var pre = pStart;

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

rad = i*math.pi/180; // Hitung radian

//r*math.cos(rad) Offset horizontal dari titik akhir busur relatif terhadap titik

//r*math.sin(rad) Offset vertikal dari titik akhir busur relatif terhadap titik

// rasio kompresi vertikal kompresi

var cur = [r*math.cos (rad)+dot [0], compressionratio*r*math.sin (rad)+dot [1]];

drawline (pra, cur);

pra = cur; // Simpan koordinat titik saat ini

}

Drawline (pra, PSTART); // Buat ditutup

// Gambarlah

drawpoint ({

PW: 2, Ph: 2, Warna: 'Gelap', Titik: Dot

});

}

2. Arc

Cukup gambar bagian dari lingkaran, algoritma mirip dengan lingkaran

Salinan kode adalah sebagai berikut:

// Gambarlah busur

// dot dot

// R radius

//sudut

// Angleofslope Angle dengan X-Axis

// apakah pop muncul

// tag judul

function drawarc (dot, r, sudut, angleofslope, pop, title) {

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

var a = (AngleOfSlope+sudut/2)*Math.pi/180;

if (pop) {// Hitung koordinat baru dari pusat lingkaran

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

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

}

if (! AngleOfSlope) {

Angleofslope = 0;

}

var aos = Angleofslope*Math.pi/180;

var aos2 = (Angleofslope+sudut)*Math.pi/180;

var pStart = [newDot [0]+r*Math.cos (AOS), newDot [1]+r*math.sin (AOS)]; // Titik awal busur

var pend = [newDot [0]+r*math.cos (aos2), newDot [1]+r*math.sin (aos2)]; // titik akhir busur

var pre = pStart;

untuk (var i = 0; i <angle; i+= 2) {// Gambarlah busur dalam rentang sudut

rad = (i+angleofslope)*Math.pi/180;

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

drawline (pra, cur);

pra = cur;

}

}

3. Bentuk kipas

Hubungkan dua ujung busur ke tengah lingkaran

Salinan kode adalah sebagai berikut:

//sektor

// dot dot

// R radius

//sudut

// Angleofslope Sudut antara sumbu x menentukan arah bentuk sektor

// Apakah pop muncul, yaitu, apakah itu menyimpang dari pusat lingkaran

// tag judul

Fungsi Drawsector (Dot, R, Angle, Angleofslope, Pop, Title) {

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

var a = (AngleOfSlope+sudut/2)*Math.pi/180;

if (pop) {// Hitung koordinat baru dari pusat lingkaran

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

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

}

if (! AngleOfSlope) {

Angleofslope = 0;

}

var aos = Angleofslope*Math.pi/180;

var aos2 = (Angleofslope+sudut)*Math.pi/180;

var pStart = [newDot [0]+r*Math.cos (AOS), newDot [1]+r*math.sin (AOS)]; // Titik awal busur

var pend = [newDot [0]+r*math.cos (aos2), newDot [1]+r*math.sin (aos2)]; // titik akhir busur

Drawline (Newdot, PSTART); // Sambungkan pusat lingkaran dan titik awal

var pre = pStart;

untuk (var i = 0; i <angle; i+= 2) {// Gambarlah busur dalam rentang sudut

rad = (i+angleofslope)*Math.pi/180;

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

drawline (pra, cur);

pra = cur;

}

drawpolyline ([pra, pend, newDot]); // buatlah tertutup

// Gambarlah pusat lingkaran

drawpoint ({

PW: 2, Ph: 2, Warna: 'Gelap', Titik: Dot

});

//Label

if (title) {

Document.write ("<span style = 'Tinggi: 24px; garis-height: 24px; Lebar: 80px; Teks-Align: Center; Warna: Merah; Posisi: Absolute; Kiri:"+(NewDot [0]+R*(2/4)*Math.cos (A) -40)+"px; Top: Top: Top: Top: Top: Top: Top: Top: Top: "+(newDot [1]+r*(2/4)*Math.sin (a) -12)+" '> "+title+" </span> ");

}

}

Bukankah itu mengejutkan? Ternyata JS dapat melakukan hal -hal keren seperti itu. . .