# اختر كثافة بكسلات القماش بشكل متعمد

> قم بموازنة دقة دعم اللوحة القماشية ونسبة بكسل الجهاز واستخدام الذاكرة وتكلفة الرسم عندما يجب أن تبدو اللعبة واضحة عبر الشاشات.

- URL: https://oneshotgems.ai/ar/topics/canvas-pixel-density
- الفئة: لمطوري الألعاب
- النوع: دليل
- آخر تحديث: 5 أكتوبر 2026

تحتوي اللوحة القماشية على حجم عرض CSS ومخزن دعم للبكسل. عندما تختلف هذه الأحجام، يقوم المتصفح بتغيير حجم الصورة النقطية المرسومة، مما قد يجعل الفن ناعمًا؛ يمكن أن تؤدي مطابقة كل بكسل في الجهاز إلى تحسين الوضوح ولكنها تزيد من عدد وحدات البكسل التي يجب على اللعبة معالجتها. يعتمد الإعداد الصحيح على أسلوب الفن وميزانية العرض. قد تحتاج كائنات Pixel-art إلى قياس عدد صحيح واختيارات الجوار الأقرب، في حين قد تستفيد واجهة الرسم الخطي من دقة دعم أعلى.

## قم بقياس مربع CSS قبل ضبط وحدات البكسل

اقرأ أبعاد اللوحة المعروضة، واضربها بمقياس الجهاز المختار، واضبط عرض الجزء الخلفي وارتفاعه، وقم بتحويل إحداثيات الرسم حتى يتمكن منطق اللعبة من الاستمرار في استخدام وحدات مساحة CSS. أعد تطبيق التحويل بعد تغيير العرض أو الارتفاع، نظرًا لأن تعيين سمات اللوحة القماشية هذه يؤدي إلى إعادة تعيين حالة الرسم الخاصة بها.

قارن بين شبكة ذات بكسل واحد وحواف قطرية ونص واجهة مستخدم صغير بعوامل مقياس مثل 1 و1.5 و2. وتحقق من الوضوح والاستجابة. يعد مضاعف devicePixelRatio للجهاز الكامل نقطة انطلاق، وليس قاعدة يجب أن تتبعها كل لعبة؛ يمكن أن يؤدي خفض مقياس العرض إلى تقليل التكلفة على شاشات العرض الكثيفة مع ترك تخطيط CSS دون تغيير.

## تعامل مع تغيير الحجم والذاكرة كجزء من الاختيار

يتزايد عدد وحدات البكسل في مخزن الدعم مع كلا البعدين، لذا فإن مضاعفة المقياس في كل اتجاه يؤدي إلى إنشاء أربعة أضعاف عدد وحدات البكسل. اختبر مشهدًا مزدحمًا بأكبر حجم شاشة مدعوم وابحث عن ضغط الذاكرة أو عمليات إعادة الرسم الأبطأ قبل شحن إعداد عالي الكثافة.

تُظهر إرشادات قماش MDN إعدادًا يستند إلى devicePixelRatio. تعرض صفحة أفضل ممارسات WebGL التفاصيل الدقيقة بنسب غير صحيحة والتكبير/التصغير. أعد التحقق بعد تكبير المتصفح أو تحريك النافذة بين شاشات العرض، وتجنب إعادة تعيين مخزن النسخ الاحتياطي بشكل متكرر إذا لم تتغير أبعاده الفعالة.

## أسئلة

**هل يجب أن يساوي عرض اللوحة القماشية دائمًا عرض CSS مرات devicePixelRatio؟** لا، هذا يمكن أن يزيد من حدة المحتوى ولكنه يضاعف العمل والذاكرة. قارن نسخة كاملة الدقة بمقياس محدد باستخدام نفس المشهد وعمليات الفحص البصري.

**لماذا يصبح الرسم ضبابيًا بعد تغيير الحجم؟** يؤدي تغيير عرض اللوحة القماشية أو ارتفاعها إلى مسح الصورة النقطية الخاصة بها وإعادة تعيين حالة السياق. أعد حساب أبعاد دعمه، وقم بقياس السياق مرة أخرى، وأعد رسم المشهد.

## اتبع فضولك

- [اكتشف اختناقات الرسم على Canvas](https://oneshotgems.ai/ar/topics/canvas-game-performance): حلّل أداء لعبة ثنائية الأبعاد على Canvas باستخدام مشاهد قابلة للتكرار، ولا تقلل عمليات الرسم المكلفة إلا بعد قياس أين يُستهلك الوقت.
- [التعامل السليم مع تغيير حجم ألعاب المتصفح](https://oneshotgems.ai/ar/topics/game-resize-handling): حافظ على تزامن إحداثيات اللعبة وأبعاد canvas والتخطيط عندما يغيّر اللاعب حجم النافذة أو اتجاه الجهاز.
- [عرض أطالس Sprite بشكل موثوق على Canvas](https://oneshotgems.ai/ar/topics/sprite-atlas-rendering): حافظ على محاذاة إطارات أطلس الكائنات من خلال تحديد المستطيلات المصدر وقواعد القطع والمحاور وتحميل عمليات التحقق في خريطة عرض واحدة.

## للمزيد من القراءة

- [MDN: تحسين اللوحة القماشية](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)
- [MDN: أفضل ممارسات WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices)

---
الصفحة الأساسية: https://oneshotgems.ai/ar/topics/canvas-pixel-density