A relação entre o ponto p (x, y) em um círculo com um raio r e o centro do círculo O (x0, y0): x = x0+rcosa; y = y0+rsina, a é o radiano
Exemplo: http://www.zhaojz.com.cn/demo/draw6.html
1. Círculo
A cópia do código é a seguinte:
// círculo/elipse
// DOT DOT
// raio r
// Taxa de compressão vertical de compressão
função drawcircle (ponto, r, compressão, dados) {
var Pstart = [dot [0]+r, Dot [1]]; // ponto inicial
var pre = pstart;
for (var i = 0; i <360; i+= 5) {
rad = i*math.pi/180; // calcula radianos
//r*math.cos(rad) O deslocamento horizontal do ponto final do arco em relação ao ponto
//r*math.sin(rad) deslocamento vertical do ponto final do arco em relação ao ponto
// Taxa de compressão vertical de compressão
var CUR = [r*math.cos (rad)+dot [0], compressionratio*r*math.sin (rad)+dot [1]];
DrawLine (pré, cur);
pre = curs; // salve as coordenadas do ponto atual
}
DrawLine (pre, pstart); // Faça fechado
// Desenhe pontos
drawpoint ({
PW: 2, Ph: 2, cor: 'Darkred', Point: Dot
});
}
2. Arc
Basta desenhar parte do círculo, o algoritmo é semelhante ao círculo
A cópia do código é a seguinte:
// Desenhe um arco
// DOT DOT
// raio r
//ângulo
// ângulo de angleofslope com eixo x
// se pop aparece
// tag de título
função drawarc (ponto, r, ângulo, angleofslope, pop, título) {
var newDot = [DOT [0], DOT [1]];
var a = (angleofslope+ângulo/2)*math.pi/180;
se (pop) {// calcule as novas coordenadas do centro do círculo
newDOT [0] = DOT [0]+10*Math.cos (a);
newDot [1] = ponto [1]+10*Math.sin (a);
}
if (! angleofslope) {
angleofslope = 0;
}
var aos = angleofslope*math.pi/180;
var aos2 = (angleofslope+ângulo)*math.pi/180;
var pstart = [newDot [0]+r*math.cos (aos), newDot [1]+r*math.sin (aoS)]; // o ponto de partida do arco
var pend = [newDot [0]+r*math.cos (aos2), newDot [1]+r*math.sin (aOS2)]; // o ponto final do arco
var pre = pstart;
for (var i = 0; i <ângulo; i+= 2) {// desenhe um arco dentro da faixa de ângulo
rad = (i+angleofslope)*math.pi/180;
var = [r*math.cos (rad)+newDot [0], r*math.sin (rad)+newDot [1]];
DrawLine (pré, cur);
pre = curs;
}
}
3. Forma do ventilador
Conecte as duas extremidades do arco ao centro do círculo
A cópia do código é a seguinte:
//setor
// DOT DOT
// raio r
//ângulo
// angleofslope O ângulo entre o eixo x determina a direção da forma do setor
// se pop aparece, isto é, se ele se desvia do centro do círculo
// tag de título
Função DrawSector (Dot, R, Angle, Angleofslope, Pop, Title) {
var newDot = [DOT [0], DOT [1]];
var a = (angleofslope+ângulo/2)*math.pi/180;
se (pop) {// calcule as novas coordenadas do centro do círculo
newDOT [0] = DOT [0]+10*Math.cos (a);
newDot [1] = ponto [1]+10*Math.sin (a);
}
if (! angleofslope) {
angleofslope = 0;
}
var aos = angleofslope*math.pi/180;
var aos2 = (angleofslope+ângulo)*math.pi/180;
var pstart = [newDot [0]+r*math.cos (aos), newDot [1]+r*math.sin (aoS)]; // o ponto de partida do arco
var pend = [newDot [0]+r*math.cos (aos2), newDot [1]+r*math.sin (aOS2)]; // o ponto final do arco
Drawline (NewDot, Pstart); // Conecte o centro do círculo e o ponto de partida
var pre = pstart;
for (var i = 0; i <ângulo; i+= 2) {// desenhe um arco dentro da faixa de ângulo
rad = (i+angleofslope)*math.pi/180;
var = [r*math.cos (rad)+newDot [0], r*math.sin (rad)+newDot [1]];
DrawLine (pré, cur);
pre = curs;
}
drawpolyline ([pre, pend, newDot]); // Faça fechado
// desenha o centro do círculo
drawpoint ({
PW: 2, Ph: 2, cor: 'Darkred', Point: Dot
});
//Rótulo
if (title) {
document.write ("<span style = 'altura: 24px; altura de linha: 24px; largura: 80px; text-align: centro; cor: vermelho; posição: absoluto; esquerda:"+(newDot [0]+r*(2/4)*math.cos (a) -40)+"px; top: "+(newDot [1]+r*(2/4)*Math.sin (a) -12)+" '> "+title+" </span> ");
}
}
Não é chocante? Acontece que o JS pode fazer coisas tão legais. . .