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