JavaScript Academy · درس

التعامل مع الصور والنصوص

ارسموا الصور والنصوص المنسّقة على Canvas.

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

تحميل صورة

يرسم canvas من عنصر HTMLImageElement. أنشئ كائن Image، واضبط قيمة src الخاصة به، وانتظر onload قبل الرسم، إذ لا تتوفر وحدات البكسل قبل ذلك.

const img = new Image();
img.onload = () => ctx.drawImage(img, 0, 0);
img.src = "/logo.png";

أساسيات drawImage

ترسم drawImage(img, dx, dy) الصورة في الموضع المحدد بحجمها الطبيعي.

img.onload = () => {
  ctx.drawImage(img, 20, 20);
};

تغيير حجم الصور

يغيّر الشكل ذو الوسائط الخمسة drawImage(img, dx, dy, dWidth, dHeight) حجم الصورة لتلائم مربعًا مستهدفًا.

ctx.drawImage(img, 0, 0, 160, 90); // fit into 160x90

اقتصاص الصورة باستخدام مستطيل المصدر

يتيح الشكل ذو الوسائط التسعة اقتصاص الصورة: drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). وتصف الوسائط الأربعة الأولى الجزء المقتطع من المصدر.

ctx.drawImage(img, 0, 0, 50, 50, 10, 10, 100, 100); // crop 50x50 → scale to 100x100

رسم نص مملوء

ترسم fillText(text, x, y) النص باستخدام fillStyle. وتمثل قيمة y خط أساس النص افتراضيًا.

ctx.fillStyle = "#2c3e50";
ctx.font = "24px sans-serif";
ctx.fillText("Hello Canvas", 20, 50);

نص ذو حدود

ترسم strokeText(text, x, y) حدود النص فقط باستخدام strokeStyle وlineWidth.

ctx.font = "40px bold serif";
ctx.lineWidth = 2;
ctx.strokeStyle = "navy";
ctx.strokeText("Outline", 20, 80);

خاصية font

تتبع font الصيغة المختصرة في CSS: [style] [weight] size family. ويُشترط تحديد الحجم والعائلة.

ctx.font = "italic bold 28px Georgia, serif";

محاذاة النص

تحدد textAlign ‏(start/end/left/right/center) نقطة الارتكاز الأفقية، بينما تحدد textBaseline ‏(top/middle/alphabetic/bottom) نقطة الارتكاز الرأسية حول النقطة المحددة.

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Centered", canvas.width / 2, canvas.height / 2);

قياس النص

تعيد measureText(text) كائنًا من نوع TextMetrics. وتخبرك خاصية width بعرض النص عند رسمه، وهو أمر أساسي لتخطيط العناصر والتفاف النص.

const m = ctx.measureText("How wide?");
console.log(m.width); // pixels

التفاف الكلمات البسيط

اجمع بين measureText وحلقة لالتفاف السلاسل النصية الطويلة على عدة أسطر.

function wrap(ctx, text, x, y, maxW, lh) {
  let line = "";
  for (const word of text.split(" ")) {
    const test = line + word + " ";
    if (ctx.measureText(test).width > maxW && line) {
      ctx.fillText(line, x, y);
      line = word + " ";
      y += lh;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, y);
}

الظلال لإضفاء العمق

تنطبق خصائص الظل على الأشكال والصور والنصوص: shadowColor وshadowBlur وshadowOffsetX/Y.

ctx.shadowColor = "rgba(0,0,0,0.4)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.fillText("With shadow", 20, 60);

اختبار سريع

اختبر مدى فهمك لرسم الصور والنصوص.

مراجعة: الصور والنصوص

لقد تعلمت تحميل الصور ورسمها مع تغيير الحجم والاقتصاص باستخدام drawImage، ورسم النص باستخدام fillText/strokeText، وضبط font، ومحاذاة النص، وقياس عرضه باستخدام measureText، وإضافة الظلال. التالي: الحركة.

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

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

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

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

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

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

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

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

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

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

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

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

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