استخدم JS لرسم الدوائر والأقواس وأشكال المروحة

العلاقة بين النقطة P (x ، y) على دائرة مع دائرة نصف قطرها r ووسط الدائرة O (x0 ، y0): x = x0+rcosa ؛ y = y0+rsina ، a هو الراديان

مثال: http://www.zhaojz.com.cn/demo/draw6.html

1. الدائرة

نسخة الكود كما يلي:

// Circle/Pelipse

// dot dot

// r دائرة نصف قطرها

// نسبة الضغط العمودية للضغط

دالة 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) الإزاحة الأفقية لنقطة نهاية القوس بالنسبة إلى DOT

//r*math.sin(Rad) إزاحة عمودية لنقطة نهاية القوس بالنسبة إلى نقطة

// نسبة الضغط العمودية للضغط

var cur = [r*math.cos (rad)+dot [0] ، compressionRatio*r*math.sin (rad)+dot [1]] ؛

Drawline (pre ، cur) ؛

قبل = cur ؛ // احفظ إحداثيات النقطة الحالية

}

drawline (pre ، pstart) ؛ // جعل مغلقة

// ارسم النقاط

DrawPoint ({

PW: 2 ، Ph: 2 ، اللون: "Darkred" ، النقطة: Dot

}) ؛

}

2. قوس

مجرد رسم جزء من الدائرة ، الخوارزمية تشبه الدائرة

نسخة الكود كما يلي:

// ارسم قوسًا

// dot dot

// r دائرة نصف قطرها

//زاوية

// angleofslope angle مع محور x

// ما إذا كان البوب ​​يظهر

// علامة العنوان

دالة drawarc (نقطة ، R ، Angle ، Angleofslope ، pop ، title) {

var newdot = [dot [0] ، dot [1]] ؛

var a = (angleofslope+angle/2)*math.pi/180 ؛

إذا (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 ؛

لـ (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) ؛

قبل = cur ؛

}

}

3. شكل المروحة

قم بتوصيل طرفي القوس بمركز الدائرة

نسخة الكود كما يلي:

//قطاع

// dot dot

// r دائرة نصف قطرها

//زاوية

// angleofslope تحدد الزاوية بين المحور السيني اتجاه شكل القطاع

// ما إذا كان البوب ​​يظهر ، أي ما إذا كان ينحرف عن وسط الدائرة

// علامة العنوان

دالة DrawSector (DOT ، R ، Angle ، Angleofslope ، pop ، title) {

var newdot = [dot [0] ، dot [1]] ؛

var a = (angleofslope+angle/2)*math.pi/180 ؛

إذا (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)] ؛ // نقطة نهاية القوس

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) ؛

قبل = cur ؛

}

drawpolyline ([pre ، pend ، newdot]) ؛ // اجعل مغلقًا

// ارسم مركز الدائرة

DrawPoint ({

PW: 2 ، Ph: 2 ، اللون: "Darkred" ، النقطة: Dot

}) ؛

//ملصق

إذا (العنوان) {

document.write ("<span style = 'الارتفاع: 24px ؛ خط الذروة: 24px ؛ العرض: 80px ؛ النصوص النصية: المركز ؛ اللون: أحمر ؛ الموضع: مطلق ؛ اليسار:"+(NewDot [0]+r*(2/4)*Math.cos (a) -40)+"px ؛ top: top: top: "+(NewDot [1]+r*(2/4)*Math.Sin (a) -12)+" '> "+title+" </span> ") ؛

}

}

أليست صدمة؟ اتضح أن JS يمكن أن تفعل مثل هذه الأشياء الرائعة. . .