半径Rと円の中心O(x0、y0)の中心を持つ円上の点p(x、y)の関係:x = x0+rcosa; y = y0+rsina、aはラジアンです
例:http://www.zhaojz.com.cn/demo/draw6.html
1。円
コードコピーは次のとおりです。
// circle/ellipse
//ドットドット
// r半径
//圧縮垂直圧縮比
関数drawcircle(dot、r、compressionratio、data){
var pstart = [dot [0]+r、dot [1]]; //起動点
var pre = pstart;
for(var i = 0; i <360; i+= 5){
rad = i*math.pi/180; //ラジアンを計算します
//r*math.cos(rad)ドットに対するアークのエンドポイントの水平オフセット
//r*math.sin(rad)ドットに対するアークのエンドポイントの垂直オフセット
//圧縮垂直圧縮比
var cur = [r*math.cos(rad)+dot [0]、compressionratio*r*math.sin(rad)+dot [1]];
ドローライン(pre、cur);
pre = cur; //現在のポイントの座標を保存します
}
ドローライン(pre、pstart); //閉じます
//ドットを描画します
drawpoint({
PW:2、PH:2、Color: 'Darkred'、Point:Dot
});
}
2。アーク
円の一部を描くだけで、アルゴリズムは円に似ています
コードコピーは次のとおりです。
//アークを描きます
//ドットドット
// r半径
//角度
// X軸を使用したAngleofslope角度
//ポップがポップアップするかどうか
//タイトルタグ
関数drawarc(dot、r、angle、angleofslope、pop、title){
var newdot = [dot [0]、dot [1]];
var a =(angleofslope+angle/2)*math.pi/180;
if(pop){//円の中心の新しい座標を計算します
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+angle)*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;
for(var i = 0; i <angle; i+= 2){//角度範囲内で弧を描く
rad =(i+angleofslope)*math.pi/180;
var cur = [r*math.cos(rad)+newdot [0]、r*math.sin(rad)+newdot [1]];
ドローライン(pre、cur);
pre = cur;
}
}
3。ファンの形
アークの両端を円の中心に接続します
コードコピーは次のとおりです。
//セクタ
//ドットドット
// r半径
//角度
// angleofslope x軸間の角度は、セクターの形状の方向を決定します
//ポップがポップアップするかどうか、つまり、それが円の中心から逸脱するかどうか
//タイトルタグ
関数drawsector(dot、r、angle、angleofslope、pop、title){
var newdot = [dot [0]、dot [1]];
var a =(angleofslope+angle/2)*math.pi/180;
if(pop){//円の中心の新しい座標を計算します
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+angle)*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)]; //アークのエンドポイント
ドローライン(NewDot、Pstart); //円の中心と開始点を接続します
var pre = pstart;
for(var i = 0; i <angle; i+= 2){//角度範囲内で弧を描く
rad =(i+angleofslope)*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、Color: 'Darkred'、Point:Dot
});
//ラベル
if(title){
document.write( "<span style = 'height:24px; line-height:24px; width:80px; text-align:center; color:red; position:aspolute; left:"+(newdot [0]+r*(2/4)*math.cos(a)-40)+"px; top:"+(newdot [0]+r*(2/4)* "+(newdot [1]+r*(2/4)*math.sin(a)-12)+" '> "+title+" </span> ");
}
}
衝撃的ではありませんか? JSはそのようなクールなことをすることができることがわかります。 。 。