JavaScript Academy · درس

رسم الأشكال والمسارات

اعرضوا المستطيلات والأقواس والمسارات المخصصة.

رسم الأشكال والمسارات درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

المستطيلات أولًا

للمستطيلات اختصارات مخصصة: fillRect وstrokeRect وclearRect. ويأخذ كل منها (x, y, width, height).

ctx.fillStyle = "#2ecc71";
ctx.fillRect(10, 10, 120, 60);
ctx.strokeStyle = "#000";
ctx.strokeRect(10, 10, 120, 60);

بدء مسار

لرسم أي شيء بخلاف المستطيلات، عليك إنشاء مسار. استدعِ beginPath() للبدء من جديد، وأضف المقاطع، ثم استدعِ stroke() أو fill().

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.stroke();

moveTo وlineTo

ترفع moveTo(x, y) القلم وتنقله دون رسم. بينما ترسم lineTo(x, y) خطًا مستقيمًا من النقطة الحالية إلى النقطة الجديدة.

ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(120, 90);
ctx.lineTo(30, 90);
ctx.stroke();

إغلاق مسار

ترسم closePath() خطًا عائدًا إلى نقطة البداية، وبذلك تكتمل الحدود. وهي مفيدة لرسم المضلعات.

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.stroke();

تعبئة الأشكال

تملأ fill() الجزء الداخلي من المسار الحالي باستخدام fillStyle. ويمكنك تعبئة المسار نفسه ورسم حدوده.

ctx.beginPath();
ctx.moveTo(100, 20);
ctx.lineTo(160, 120);
ctx.lineTo(40, 120);
ctx.closePath();
ctx.fillStyle = "gold";
ctx.fill();
ctx.stroke();

رسم الدوائر باستخدام arc

ترسم arc(x, y, radius, startAngle, endAngle) قوسًا دائريًا. وتُقاس الزوايا بالتقدير الدائري. تمتد الدائرة الكاملة من 0 إلى 2 * Math.PI.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "#9b59b6";
ctx.fill();

الأقواس الجزئية وقطاعات الدائرة

استخدم زاوية بداية وزاوية نهاية لرسم قطاع. ويمكنك دمج ذلك مع lineTo نحو المركز للحصول على قطاع دائري.

ctx.beginPath();
ctx.moveTo(100, 75);
ctx.arc(100, 75, 50, 0, Math.PI / 2);
ctx.closePath();
ctx.fill();

المنحنيات التربيعية ومنحنيات Bezier

ترسم quadraticCurveTo(cpx, cpy, x, y) وbezierCurveTo(...) منحنيات سلسة باستخدام نقاط التحكم.

ctx.beginPath();
ctx.moveTo(20, 100);
ctx.quadraticCurveTo(100, 10, 180, 100);
ctx.stroke();

تنسيق الخطوط

تحكم في مظهر الخط باستخدام lineWidth وlineCap ‏(butt/round/square) وlineJoin ‏(miter/round/bevel) وsetLineDash.

ctx.lineWidth = 6;
ctx.lineCap = "round";
ctx.setLineDash([12, 6]);
ctx.beginPath();
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();

قواعد التعبئة

تقبل fill() القيمة "nonzero"، وهي الافتراضية، أو "evenodd" لتحديد طريقة تعبئة المسارات الفرعية المتداخلة، وهذا مفيد للأشكال التي تحتوي على فتحات.

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.arc(100, 75, 25, 0, Math.PI * 2);
ctx.fill("evenodd"); // donut

التدرجات كتعبئة

أنشئ تدرجًا باستخدام createLinearGradient، وأضف نقاط الألوان، ثم عيّنه إلى fillStyle.

const g = ctx.createLinearGradient(0, 0, 200, 0);
g.addColorStop(0, "red");
g.addColorStop(1, "blue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 200, 100);

اختبار سريع

اختبر مدى معرفتك بالمسارات.

مراجعة: الأشكال والمسارات

يمكنك الآن رسم المستطيلات، وإنشاء المسارات باستخدام beginPath/moveTo/lineTo/closePath، ورسم الدوائر باستخدام arc، وإضافة المنحنيات، وتنسيق الخطوط، والتعبئة بالألوان أو التدرجات. التالي: الصور والنصوص.

الأسئلة الشائعة

هل درس «رسم الأشكال والمسارات» مجاني؟

نعم — نص درس «رسم الأشكال والمسارات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «رسم الأشكال والمسارات»؟

اعرضوا المستطيلات والأقواس والمسارات المخصصة. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «رسم الأشكال والمسارات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy