النصوص والصور على Canvas

حدّد الخط باستخدام: ctx.font = "bold 24px sans-serif". ارسم باستخدام: ctx.fillText("Hello", x, y) أو ctx.strokeText("Hello", x, y). يمثل إحداثي y خط أساس النص — أضف ارتفاع الأجزاء الصاعدة فوقه لوضع النص بصورة صحيحة داخل مربع الإحاطة.

يتحكم ctx.textAlign في المحاذاة الأفقية: "left" (الافتراضي)، و"center"، و"right". ويتحكم ctx.textBaseline في المحاذاة الرأسية بالنسبة إلى y: "top"، و"middle"، و"alphabetic" (الافتراضي)، و"bottom". لتوسيط النص، اضبط القيمتين على "center" و"middle".

يعيد ctx.measureText("text") كائنًا من النوع TextMetrics يتضمن العرض ومقاييس الخط. استخدمه لحساب مواضع النص ديناميكيًا — مثل توسيط النص داخل مربع، أو التفاف النص عند حد أقصى للعرض، أو محاذاة التسميات إلى اليمين بجوار نقاط البيانات.

لا يوفر Canvas التفافًا مدمجًا للنص. نفّذه بنفسك: قِس عروض الكلمات، واجمعها حتى تتجاوز maxWidth، ثم انتقل إلى سطر جديد بفواصل lineHeight. تُعد هذه دالة مساعدة شائعة في مكتبات عرض Canvas.

ترسم ctx.drawImage(image, dx, dy) عنصر HTMLImageElement أو HTMLCanvasElement أو HTMLVideoElement عند الموضع (dx, dy). حمّل الصورة أولًا، ثم ارسمها داخل معالج onload الخاص بها لضمان توفر البكسلات قبل الرسم.

تُحجّم ctx.drawImage(image, dx, dy, dw, dh) الصورة لتلائم أبعاد dw × dh. لا يُحافَظ على نسبة العرض إلى الارتفاع تلقائيًا — احسب الأبعاد يدويًا. للحفاظ على النسبة: dw = img.width * scale; dh = img.height * scale.

تستخدم drawImage ذات الوسائط التسعة: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). تقتص المستطيلات المصدر (sx, sy, sw, sh) جزءًا من الصورة، بينما تضع المستطيلات الوجهة (dx, dy, dw, dh) الجزء المقتص وتُحجّمه على اللوحة.

يعطّل ctx.imageSmoothingEnabled = false الاستيفاء الثنائي الخطي عند تحجيم الصور. استخدمه مع الرسومات بالبكسل عندما تريد تحجيمًا واضحًا من دون تنعيم. اتركه مفعّلًا (وهو الإعداد الافتراضي) للصور الفوتوغرافية، إذ يبدو التحجيم السلس أفضل فيها.

مرّر لوحة Canvas كمصدر إلى drawImage لرسم لوحة على لوحة أخرى. يتيح ذلك الرسم خارج الشاشة: ارسم التركيبات المعقدة على لوحة مخفية، ثم ارسم تلك اللوحة على اللوحة المرئية بعملية واحدة في كل إطار.

تطبّق ctx.globalAlpha (من 0 إلى 1) شفافية موحّدة على جميع عمليات الرسم اللاحقة. وتتحكم ctx.globalCompositeOperation في كيفية مزج الرسومات الجديدة مع البكسلات الموجودة: "source-over" (الافتراضي)، و"multiply"، و"screen"، و"destination-out" (للمسح)، وغير ذلك.

تصدّر canvas.toDataURL("image/png") اللوحة بصيغة عنوان بيانات PNG بترميز base64. استخدمها لتنزيل يبدأه المستخدم: أنشئ مرساة، واضبط href على عنوان البيانات وdownload على اسم ملف، ثم انقر عليها برمجيًا.

ما الذي يؤثر فيه ctx.textBaseline = "middle" عند رسم النص؟

يستخدم عرض النص في Canvas كلًا من ctx.font وfillText/strokeText وtextAlign وtextBaseline لتحديد الموضع، وmeasureText لإجراء حسابات التخطيط. يتيح رسم الصور عبر drawImage تحجيم الصور واقتصاصها، بينما يتحكم globalAlpha وglobalCompositeOperation في المزج. وتصدّر toDataURL اللوحة لتنزيلها أو استخدامها لاحقًا.