عندما مرت فكرة رسم JS عبر عقلي ، شعرت أنها مثيرة للاهتمام ، لذلك مارستها. رسومات JS هي سلسلة من المقالات ، والتي هي في الأصل حول النقاط والخطوط والأسطح.
دعونا نلقي نظرة على المثال أولاً: http://www.zhaojz.com.cn/demo/draw5.html
قليلا
نستخدم علامة Span للإشارة إلى النقطة هنا
نسخة الكود كما يلي:
// مسح النقطة والحجم واللون والإحداثيات وملصقات النقطة ؛ من الواضح أن معلمة OST هي كائن
وظيفة drawpoint (opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' style = 'display: inline block ؛ width:"+opts.pw+"px ؛ height: "+opts.point [1]+" px ؛ '> "+(opts.point [2]؟ (" <div style =' position: reporative ؛ '> <span style =' position: absolute ؛ left: 5px ؛ bottom: 1px ؛ text-align: left ؛ width: 100px ؛
}
عدة معلمات:
opts.pw: عرض النقطة
Opts.ph: ارتفاع النقطة يساوي بشكل عام Opts.pw
Opts.Color: لون النقاط
point.point: يشير إلى موضع النقطة ، النقطة [0]: الموضع الأفقي ، النقطة [1]: نقطة الموضع الرأسية [2] هي تسمية النقطة
ملاحظة: يجب أن تكون سمة الموضع مطلقة ؛
2. خط مستقيم
يتكون الخط المستقيم من نقاط ، لذلك نحتاج إلى رسم أكثر من نقطتين بين نقطتين. بصريًا ، إنه خط مستقيم.
نسخة الكود كما يلي:
// ارسم الخطوط
// نقطة انطلاق PSTART
// Pend End Point
// مختار المعلمات
انسحاب الوظيفة (PSTART ، Pend ، OPTS) {
var ph = 1 ؛
var pw = 1 ؛
var color = "darkred" ؛
إذا (اختار) {
اللون = opts.color؟ OPTS.COLOR: اللون ؛
}
دير المنحدر // المنحدر
var noslope = false ؛ // هل هناك ميل
var hdist = pend [0] - pstart [0] ؛
var vdist = pend [1] - pstart [1] ؛
if (hdist! = 0) {
SLOPE = MATH.ABS (VDIST/HDIST) ؛ // احسب المنحدر
}آخر{
noslope = صحيح ؛ // عندما يكون hdist = 0 ، لا يحتوي الخط المستقيم على منحدر
}
var gapp = pw> ph؟ PH: PW ؛ // المسافة بين النقاط المجاورة الافتراضية (نقاط بكسل في الزاوية اليسرى العليا)
var diagonal = math.sqrt (math.pow (hdist ، 2) + math.pow (vdist ، 2)) ؛ // طول hypotenuse
var pn = parseint (قطري/gapp) ؛ // احسب عدد النقاط بين نقطتين
if (pn <3) {pn = pn*3+1} ؛ // إذا كان عدد النقاط أقل من 3 ، فقم بزيادة عدد النقاط ؛ لماذا +1 ، هو التأكد من وجود نقطة واحدة على الأقل عند PN = 0
var vgap = math.abs (vdist)/pn ؛ // المسافة العمودية بين نقطتين مجاورة
var hgap = math.abs (hdist)/pn ؛ // المسافة الأفقية بين نقطتين متجاورتين
لـ (var i = 0 ؛ i <pn ؛ i ++) {
// نقاط السحب
// hgap المسافة الأفقية بين نقطتين متجاورتين
// VGAP المسافة العمودية بين نقطتين مجاورة
// hgap*i*(pend [0] <pstart [0]؟-1: 1)*(noslope؟ 0: 1) الإزاحة الأفقية من نقطة البداية
// vgap*i*(Pend [1] <pstart [1]؟-1: 1) الإزاحة الرأسية من نقطة البداية
// (Pend [0] <pstart [0]؟-1: 1) اتجاه الإزاحة الأفقية
// (Pend [1] <pstart [1]؟-1: 1) اتجاه الإزاحة الرأسية
// (noslope؟ 0: 1) عندما لا يكون للخط المستقيم أي ميل ، فإن الإزاحة الأفقية هي 0
DrawPoint ({
PW: PW ،
PH: PH ،
اللون: اللون ،
النقطة: [(hgap*i*(pend [0] <pstart [0]؟-1: 1)*(noslope؟ 0: 1)+pstart [0]) ، (vgap*i*(pend [1] <pstart [1]؟-1: 1)+pstart [1])]
}) ؛
}
}
يمكنك رسم polylines والأسطح بناءً على الإنترنت:
polyline:
نسخة الكود كما يلي:
// polyline
// PS مجموعة أحادية البعد من النقاط
وظيفة drawpolyline (ps) {
إذا (PS) {
// ارسم الخطوط
لـ (var i = 0 ؛ i <ps.length-1 ؛ i ++) {
drawline (ps [i] ، ps [i+1]) ؛
}
// اقلب نقطة التحول
لـ (var i = 0 ؛ i <ps.length ؛ i ++) {
DrawPoint ({
PW: 3 ،
PH: 3 ،
اللون: "أحمر" ،
النقطة: PS [i]
}) ؛
}
}
}
المضلعات:
نسخة الكود كما يلي:
// مضلع
// PS مجموعة أحادية البعد من النقاط
وظيفة drawpolygon (ps) {
إذا (PS) {
// ارسم الخطوط
لـ (var i = 0 ؛ i <ps.length-1 ؛ i ++) {
drawline (ps [i] ، ps [i+1]) ؛
}
// تغيير مغلق
if (ps.length> 2) {
Drawline (PS [Ps.Length-1] ، PS [0])
}
// اقلب نقطة التحول
لـ (var i = 0 ؛ i <ps.length ؛ i ++) {
DrawPoint ({
PW: 3 ،
PH: 3 ،
اللون: "أحمر" ،
النقطة: PS [i]
}) ؛
}
}
}
المستطيل:
نسخة الكود كما يلي:
// ارسم مستطيل
// LeftTop موضع النقطة في الزاوية اليسرى العليا
//عرض
//عالي
وظيفة drawRectangle (LeftTop ، العرض ، عالية) {
drawpolygon ([
Lefttop ،
[LeftTop [0] ، LeftTop [1]+High] ،
[LeftTop [0]+عرض ، LeftTop [1]+High] ،
[LeftTop [0]+عرض ، LeftTop [1]]
]) ؛
//تعبئة
//document.write("<span style = 'الارتفاع: "+(High-1)+" px ؛ width: "+(width-1)+" px ؛ colorte-color: "+" Green "+" ؛ position: absolute ؛ left: "+(lefttop [0] +1)+" px ؛ top: "+(lefttop [1] +1).
}
اتضح أن JS يمكن أن تفعل مثل هذه الأشياء الرائعة ، فهي تحتاج حقًا إلى دراستها بعناية