ความสัมพันธ์ระหว่างจุด 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 radius
// อัตราส่วนการบีบอัดแนวตั้ง
ฟังก์ชั่น DrawCircle (dot, R, การบีบอัด, ข้อมูล) {
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) การชดเชยแนวนอนของจุดสิ้นสุดของส่วนโค้งที่สัมพันธ์กับ dot
//r*math.sin(rad) การชดเชยแนวตั้งของจุดสิ้นสุดของส่วนโค้งที่สัมพันธ์กับ dot
// อัตราส่วนการบีบอัดแนวตั้ง
var cur = [r*math.cos (rad)+dot [0], การบีบอัด*r*math.sin (rad)+dot [1]];
Drawline (Pre, Cur);
pre = cur; // บันทึกพิกัดของจุดปัจจุบัน
-
drawline (pre, pstart); // ทำปิด
// วาดจุด
drawpoint ({
PW: 2, pH: 2, สี: 'Darkred', Point: dot
-
-
2. อาร์ค
เพียงแค่วาดส่วนหนึ่งของวงกลมอัลกอริทึมคล้ายกับวงกลม
การคัดลอกรหัสมีดังนี้:
// วาดส่วนโค้ง
// dot dot
// r radius
//มุม
// Angleoflope Angle กับแกน x
// ไม่ว่าจะป๊อปโผล่ขึ้นมา
// แท็กชื่อ
ฟังก์ชั่น drawarc (dot, r, angle, angleofslope, pop, title) {
var newdot = [dot [0], dot [1]];
var a = (angleofslope+มุม/2)*math.pi/180;
ถ้า (ป๊อป) {// คำนวณพิกัดใหม่ของศูนย์กลางของวงกลม
newdot [0] = dot [0]+10*math.cos (a);
newdot [1] = dot [1]+10*math.sin (a);
-
ถ้า (! Angleofslope) {
AngleofSlope = 0;
-
var aos = angleofslope*math.pi/180;
var aos2 = (Angleofslope+มุม)*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 <angle; i+= 2) {// วาดส่วนโค้งภายในช่วงมุม
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. รูปร่างพัดลม
เชื่อมต่อปลายทั้งสองของส่วนโค้งเข้ากับกึ่งกลางของวงกลม
การคัดลอกรหัสมีดังนี้:
// ภาค
// dot dot
// r radius
//มุม
// angleofslope มุมระหว่างแกน x กำหนดทิศทางของรูปร่างเซกเตอร์
// ไม่ว่าจะป๊อปโผล่ขึ้นมานั่นคือไม่ว่าจะเบี่ยงเบนจากศูนย์กลางของวงกลม
// แท็กชื่อ
ฟังก์ชั่น DrawSector (dot, R, Angle, Angleofslope, Pop, Title) {
var newdot = [dot [0], dot [1]];
var a = (angleofslope+มุม/2)*math.pi/180;
ถ้า (ป๊อป) {// คำนวณพิกัดใหม่ของศูนย์กลางของวงกลม
newdot [0] = dot [0]+10*math.cos (a);
newdot [1] = dot [1]+10*math.sin (a);
-
ถ้า (! Angleofslope) {
AngleofSlope = 0;
-
var aos = angleofslope*math.pi/180;
var aos2 = (Angleofslope+มุม)*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 <angle; i+= 2) {// วาดส่วนโค้งภายในช่วงมุม
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 ([ก่อน, pend, newdot]); // ทำปิด
// วาดกึ่งกลางของวงกลม
drawpoint ({
PW: 2, pH: 2, สี: 'Darkred', Point: dot
-
//ฉลาก
ถ้า (ชื่อ) {
document.write ("<span style = 'ความสูง: 24px; สายไฟ: 24px; ความกว้าง: 80px; text-allign: center; สี: สีแดงตำแหน่ง: Absolute; ซ้าย:"+(newdot [0]+r*(2/4)*math.cos (a) -40)+"px; "+(newdot [1]+r*(2/4)*math.sin (a) -12)+" '> "+title+" </span> ");
-
-
มันไม่น่าตกใจ? ปรากฎว่า JS สามารถทำสิ่งดีๆได้ - -