حجم عرض canvas ليس وحده وصفا لإحداثيات الرسم. قد يقرأ المساعد width في موضعين ثم يستنتج أن تغيير المظهر ضاعف مساحة العمل الداخلية. نعلن حيزا صغيرا وحجم عرض مختلفا، ونقرأ عقد MDN دون إنشاء canvas أو تشغيل متصفح.
الخلاصة السريعة
تغيير الحجم المعروض عبر CSS يسمح بتكبير الرسم أثناء عرضه؛ أبعاد الإحداثيات تحددها سمات canvas. [1] فرّق بين تغيير العرض وتعيين خاصية width التي تعيد ضبط السياق. [2]
- تعرف width و height حيز إحداثيات canvas بوحدات CSS؛ أما تغيير الحجم المعروض بـ CSS فيحجّم الصورة عند العرض. [1] لا ندمج الحقلين.
- نفترض حيز 100 في 50 وعرض CSS 200 في 50، بلا تحويلات أخرى؛ عامل العرض الأفقي 2 والعمودي 1، فلا يصبح الحيز 200 لمجرد ذلك.
- تغيير CSS قد يشوه العرض وفق MDN. [1] في ورقتنا نقطة إحداثيها 25 أفقيا تظهر عند 50 نسبيا من الحافة تحت الفرض، لا قياس للقطة.
- تعيين خاصية width يعيد ضبط السياق ويمسح محتواه، حتى عند القيمة نفسها. [2] ليس نظير تغيير CSS، ولم نعدل رسما أو نقس دقة شاشة.
أي width نقصد؟
تصف MDN سمتي width و height بأنهما حيز الإحداثيات بوحدات CSS، وتوضح أن CSS يستطيع تغيير حجم العرض مع تحجيم الصورة أثناء عرضها. [1]
نكتب اسم الموضع الكامل في بطاقة المساعد: سمة العنصر أو خاصية عرضه في CSS. تكرر الكلمة لا يجعل الحقلين واحدا. ولا نساوي بكسل CSS ببكسل مادي على شاشة مجهولة؛ لم نقدم جهازا أو كثافته. السؤال عن عقد قياس محدد، وليس عدد نقاط شاشة في كل بيئة.
نسأل عن حجم حيز للرسم وعن مساحته المعروضة، لا عن قيمة جودة لصورة. حفظ الاسمين يسبق أي حساب نقترحه للتمرين. يمكن أن يستعمل شرح عام كلمة «العرض» في الحالتين، ولذلك نلحقها باسم الحقل.
كيف يبدو عاملان مختلفان؟
نؤلف حيز إحداثيات عرضه 100 وارتفاعه 50. نختار لعرضه في CSS عرض 200 وارتفاع 50، ونفترض ألا إطارات أو هوامش أو تحويلات أخرى تغير المقارنة. ليست هذه قياسات أخذناها من متصفح أو إعدادات طبقناها في صفحة.
النسبة الأفقية 200 على 100 تساوي 2، والنسبة العمودية 50 على 50 تساوي 1. المعنى في ورقتنا أن العرض الأفقي تمدد وحده؛ لم نجعل عدد الإحداثيات المعلن في السمة يتغير إلى 200. كما لم نغير اسم المرجع الذي نقيس منه النقطة.
لا نقول إن جهازا يعرض القياسين فعلا. إنهما بطاقة حجم وبطاقة عرض، نحسب بينهما النسبة المفروضة فقط، ونترك التنفيذ والدقة المادية دون فحص.
| البطاقة المؤلفة | العرض | الارتفاع |
|---|---|---|
| حيز الإحداثيات | 100 | 50 |
| عرض CSS | 200 | 50 |
| عامل العرض | 2 | 1 |
ماذا يعني التمدد للموضع؟
ينبه MDN إلى أن تحجيم الصورة لتناسب حجم CSS قد يشوه العرض. [1]
في المقارنة المعلنة، نقطة تبعد 25 أفقيا عن حافة حيز الإحداثيات تصير على بعد 50 في حيز العرض المقابل، لأننا ضاعفنا العامل أفقيا. هذه مواضع نسبية تحت فرض الخلو من تحويلات أخرى، وليست إحداثيات قارئ شاشة أو صورة لقطة.
لو أردنا الحفاظ على النسبة بين الطول والعرض في تمرين آخر، نختار العامل نفسه للاتجاهين. لا نزعم أن هذا الإجراء استعاد تفصيلا مفقودا أو أن نقطة ظهرت فعلا في برنامج؛ المثال يفصل الحيزين فقط.
هل تعيين الخاصية يعادل تغيير المظهر؟
تعيين خاصية HTMLCanvasElement.width يعيد ضبط سياق الرسم ويمسح المحتوى، حتى عندما تعاد القيمة الحالية نفسها. [2]
إذن لا يقول المساعد إن إسناد 100 للخاصية الحالية 100 ترك الرسم كما كان فقط لأن العدد لم يتغير. العقد يذكر أثر الإسناد، وليس قياس فرق عددين. وتلك عملية أخرى عن CSS الذي غير عرض الورقة؛ اختيار الموضع المناسب جزء من فهم الأثر.
لم ننشئ canvas أو نمسح رسما أو نقيس حدة الأشكال. يحتفظ الملخص بحيز الإحداثيات وحجم CSS ومصدر التغيير، ويفصل حساب العوامل من نتيجة تنفيذ فعلي لم تقدمها المادة.
المصادر ومتابعة القراءة
- MDN: canvas element (يفتح في نافذة جديدة)developer.mozilla.org
- MDN: HTMLCanvasElement.width (يفتح في نافذة جديدة)developer.mozilla.org
أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.