js を使用して円、円弧、セクターを描画する_JavaScript スキル

半径 r の円上の点 p(x,y) と中心 O(x0,y0) の関係: x = x0 rcosA y = y0 rsinA、A はラジアン

サンプル: http://www.zhaojz.com.cn/demo/draw6.html

1. サークル

コードをコピーします コードは次のとおりです:

//円/楕円
//ドットドット
//r 半径
//compressionRatio 垂直圧縮率
functiondrawCircle(dot, r,compressionRatio, data){
var pstart = [dot[0] r, dot[1]] //開始点
; var pre = pstart; for(var i=0; i rad = i*Math.PI/180; //ラジアンを計算します
//r*Math.cos(rad) dot
を基準とした円弧の終点の水平オフセット //r*Math.sin(rad) dot
を基準とした円弧の終点の垂直方向のオフセット //compressionRatio 垂直圧縮率
var cur = [r*Math.cos(rad) dot[0],compressionRatio*r*Math.sin(rad) dot[1]];
drawLine(pre,cur);
pre = cur // 現在の点の座標を保存します
}
DrawLine(pre,pstart);//Close
//ドットを描画します
ドローポイント({
pw:2,ph:2,color:'DarkRed',point:dot
});
}

2. アーク

円の一部を描くだけで、アルゴリズムは円と似ています

コードをコピーします コードは次のとおりです:

//円弧を描く
//ドットドット
//r 半径
//角度中心角
//angleOfSlope と x 軸間の角度
//pop ポップアップするかどうか
//タイトルタグ
functiondrawArc(dot, r, angle, angleOfSlope, Pop, title){
var newDot = [ドット[0], ドット[1]];
var a = (傾きの角度/2)*Math.PI/180; If(pop){ //円の中心の新しい座標を計算します
newDot[0] = dot[0] 10*Math.cos(a);
newDot[1] = dot[1] 10*Math.sin(a);
}
If(!angleOfSlope){
傾斜角 = 0;
}
var aos = 傾斜角*Math.PI/180;
var aos2 = (傾きの角度)*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 rad = (i angleOfSlope)*Math.PI/180;
var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];
drawLine(pre,cur);
pre = cur;
}
}

3. 扇形

円弧の両端を円の中心に接続します

コードをコピー コードは次のとおりです:

//セクター
//ドットドット
//r 半径
//角度中心角
//angleOfSlope と x 軸によってセクターの方向が決まります
// ポップアップがポップアップするかどうか、つまり円の中心から外れるかどうか
//タイトルタグ
functiondrawSector(dot, r, angle, angleOfSlope, Pop, title){
var newDot = [ドット[0], ドット[1]];
var a = (傾きの角度/2)*Math.PI/180; If(pop){ //円の中心の新しい座標を計算します
newDot[0] = dot[0] 10*Math.cos(a);
newDot[1] = dot[1] 10*Math.sin(a);
}
If(!angleOfSlope){
傾斜角 = 0;
}
var aos = 傾斜角*Math.PI/180;
var aos2 = (傾きの角度)*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;
for(var i=0; i rad = (i angleOfSlope)*Math.PI/180;
var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];
drawLine(pre,cur);
pre = cur;
}
drawPolyline([pre, pend, newDot]); //閉じる
//円の中心を描画します
ドローポイント({
pw:2,ph:2,color:'DarkRed',point:dot
});
// タグ
If(タイトル){
document.write("" ;/span>");
}
}

js がこんな素晴らしいことをできるなんて、衝撃的だと思いませんか? 。 。