Взаимосвязь между точкой p (x, y) на круге с радиусом r и центром круга O (x0, Y0): x = x0+rcosa; y = y0+rsina, a - радиан
Пример: http://www.zhaojz.com.cn/demo/draw6.html
1. Круг
Кода -копия выглядит следующим образом:
// Круг/Эллипс
// dot dot
// r радиус
// Коэффициент вертикального сжатия CompressionRatio
функция DrawCircle (Dot, R, CompressionRatio, Data) {
var pStart = [dot [0]+r, dot [1]]; // начальная точка
var pre = pStart;
для (var i = 0; i <360; i+= 5) {
rad = i*math.pi/180; // Рассчитать радиан
//r*math.cos(rad) горизонтальное смещение конечной точки дуги относительно точки
//r*math.sin(rad) Вертикальное смещение конечной точки дуги относительно точки
// Коэффициент вертикального сжатия CompressionRatio
var cur = [r*math.cos (rad)+dot [0], compressionratio*r*math.sin (rad)+dot [1]];
Линия (Pre, cur);
pre = cur; // Сохранить координаты текущей точки
}
Drawline (pre, pStart); // Сделать закрытым
// рисовать точки
DrawPoint ({
PW: 2, ph: 2, цвет: «Темный», точка: точка
});
}
2. Arc
Просто нарисуйте часть круга, алгоритм похож на круг
Кода -копия выглядит следующим образом:
// Нарисуйте дугу
// dot dot
// r радиус
//угол
// угол углового угла с осью x
// появляется ли поп
// тег заголовка
Функция DraitArc (Dot, R, угол, угол склопа, поп, заголовок) {
var newdot = [dot [0], dot [1]];
var a = (angelofslope+angel/2)*math.pi/180;
if (pop) {// Рассчитайте новые координаты центра круга
newDot [0] = dot [0]+10*math.cos (a);
newdot [1] = dot [1]+10*math.sin (a);
}
if (! angelofslope) {
angelofslope = 0;
}
var aos = angelofslope*math.pi/180;
var aos2 = (angelofslope+angel)*math.pi/180;
var pStart = [newDot [0]+r*math.cos (aos), newdot [1]+r*math.sin (aos)]; // отправная точка дуги
var pend = [newDot [0]+r*math.cos (aos2), newdot [1]+r*math.sin (aos2)]; // конечная точка дуги
var pre = pStart;
Для (var i = 0; i <angel; i+= 2) {// Нарисуйте дугу в диапазоне угла
rad = (i+angelofslope)*math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1]];
Линия (Pre, cur);
pre = cur;
}
}
3. ФОРМА ВАНКА
Подключите два конца дуги к центру круга
Кода -копия выглядит следующим образом:
// сектор
// dot dot
// r радиус
//угол
// angelofslope Угол между осью x определяет направление формы сектора
// появляется ли поп, то есть, отклоняется ли он от центра круга
// тег заголовка
Функция Drawsector (Dot, R, угол, угол, поп, заголовок) {
var newdot = [dot [0], dot [1]];
var a = (angelofslope+angel/2)*math.pi/180;
if (pop) {// Рассчитайте новые координаты центра круга
newDot [0] = dot [0]+10*math.cos (a);
newdot [1] = dot [1]+10*math.sin (a);
}
if (! angelofslope) {
angelofslope = 0;
}
var aos = angelofslope*math.pi/180;
var aos2 = (angelofslope+angel)*math.pi/180;
var pStart = [newDot [0]+r*math.cos (aos), newdot [1]+r*math.sin (aos)]; // отправная точка дуги
var pend = [newDot [0]+r*math.cos (aos2), newdot [1]+r*math.sin (aos2)]; // конечная точка дуги
Drawline (NewDot, PSTART); // подключить центр круга и отправная точка
var pre = pStart;
Для (var i = 0; i <angel; i+= 2) {// Нарисуйте дугу в диапазоне угла
rad = (i+angelofslope)*math.pi/180;
var cur = [r*math.cos (rad)+newdot [0], r*math.sin (rad)+newdot [1]];
Линия (Pre, cur);
pre = cur;
}
Drawpolyline ([Pre, Pend, Newdot]); // Сделать закрытым
// Нарисуйте центр круга
DrawPoint ({
PW: 2, ph: 2, цвет: «Темный», точка: точка
});
//Этикетка
if (title) {
document.write ("<<span style = 'height: 24px; line-height: 24px; ширина: 80px; text-align: center; color: красный; позиция: абсолют; слева:"+(newdot [0]+r*(2/4)*math.cos (a) -40)+"px; "+(newDot [1]+r*(2/4)*math.sin (a) -12)+" '> "+title+" </span> ");
}
}
Разве это не шокирует? Оказывается, JS может делать такие крутые вещи. Полем Полем