HTML Academy · درس

رسم المستطيلات والمسارات

استخدام fillRect وstrokeRect وأوامر المسارات لرسم الأشكال

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

إعداد Canvas

يتطلب العنصر <canvas> تحديد سمتي العرض والارتفاع صراحةً لأبعاد البكسلات. للحصول على السياق ثنائي الأبعاد: const ctx = canvas.getContext("2d"). تستخدم جميع عمليات الرسم كائن السياق هذا.

<canvas id="c" width="800" height="600"></canvas>
const ctx = document.getElementById("c").getContext("2d");

fillRect وstrokeRect

ارسم المستطيلات من دون مسارات: تؤدي ctx.fillRect(x, y, width, height) إلى تعبئة مستطيل بلون مصمت. وترسم ctx.strokeRect(x, y, width, height) حدوده الخارجية. حدّد ctx.fillStyle وctx.strokeStyle قبل الرسم.

ctx.fillStyle = "#3b82f6";
ctx.fillRect(50, 50, 200, 100);
ctx.strokeStyle = "#1e3a8a";
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 100);

clearRect للمسح

تمسح ctx.clearRect(x, y, width, height) البكسلات وتحولها إلى شفافة. استخدمها لمسح المناطق قبل إعادة رسمها — وهذا أساسي للتحريك: امسح اللوحة، ثم أعد رسم كل شيء في مواضع جديدة في كل إطار.

أساسيات المسارات

تحدد المسارات الأشكال. ابدأ باستخدام: ctx.beginPath(). انتقل إلى نقطة البداية باستخدام: ctx.moveTo(x, y). ارسم الخطوط باستخدام: ctx.lineTo(x, y). أغلق المسار باستخدام: ctx.closePath(). اعرضه باستخدام: ctx.fill() أو ctx.stroke().

رسم الخطوط

مثلث: beginPath → moveTo(100,50) → lineTo(200,200) → lineTo(0,200) → closePath → stroke(). يرسم closePath القطعة الأخيرة عائدًا إلى نقطة البداية تلقائيًا — فلا حاجة إلى تكرار الإحداثي الأول.

القوس والدائرة

ctx.arc(cx, cy, radius, startAngle, endAngle). دائرة كاملة: ctx.arc(100, 100, 50, 0, Math.PI * 2). تُقاس الزوايا بالراديان. تمثل القيمة 0 الاتجاه إلى اليمين (موضع الساعة 3)، وتمثل Math.PI الاتجاه إلى اليسار (موضع الساعة 9).

منحنيات Bezier

ترسم ctx.quadraticCurveTo(cpx, cpy, x, y) منحنى Bezier تربيعيًا بنقطة تحكم واحدة. وترسم ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) منحنى Bezier تكعيبيًا بنقطتي تحكم لإنشاء منحنيات سلسة.

أنماط التعبئة

تقبل fillStyle سلاسل ألوان، وتدرجات خطية (ctx.createLinearGradient())، وتدرجات شعاعية (ctx.createRadialGradient())، وأنماطًا (ctx.createPattern(image, repeat)). استخدم تعبئات معقدة تتجاوز الألوان المصمتة لإنشاء تأثيرات مرئية غنية.

أنماط الخطوط

تحكم في مظهر الخط باستخدام: ctx.lineWidth (عرض الخط بالبكسلات)، وctx.lineCap ("butt" و"round" و"square")، وctx.lineJoin ("miter" و"round" و"bevel")، وctx.setLineDash([5, 3]) لرسم خطوط متقطعة بأطوال متناوبة.

الحفظ والاستعادة

تدفع ctx.save() الحالة الحالية (fillStyle وstrokeStyle وlineWidth وtransform وclip) إلى مكدس. وتستعيدها ctx.restore() بإخراجها من المكدس. أحط عمليات الرسم المعقدة بـ save/restore لتجنب تسرب الأنماط بين عمليات الرسم غير المرتبطة.

نظام الإحداثيات

أصل اللوحة (0,0) هو الزاوية العلوية اليسرى. تزداد قيمة X نحو اليمين، وتزداد قيمة Y نحو الأسفل. تغيّر التحويلات (translate وrotate وscale) نظام الإحداثيات، مما يتيح الرسم بالنسبة إلى أصل محلي من دون حساب المواضع المطلقة يدويًا.

اختبار الفهم

ماذا يفعل ctx.beginPath() قبل رسم مسار؟

الملخص

يستخدم الرسم ثنائي الأبعاد في Canvas أساليب السياق لرسم المستطيلات (fillRect وstrokeRect)، والمسارات (beginPath وmoveTo وlineTo وarc وbezierCurveTo)، وتنسيق الرسم (fillStyle وstrokeStyle وlineWidth)، وإدارة الحالة (save/restore). يتيح إتقان هذه العناصر الأساسية إنشاء رسومات معقدة انطلاقًا من لبنات بسيطة.

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

هل درس «رسم المستطيلات والمسارات» مجاني؟

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

ماذا ستتعلم في «رسم المستطيلات والمسارات»؟

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

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

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

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

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

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

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

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

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