[javascript] HTML5 Canvas: الأفضل لإعادة رسم الكائنات أو استخدام الصور النقطية؟


Answers

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

على أساس عام ، أقترح النظر في المسار التالي.

لقد ذكرت أنه يمكن أن يكون هناك 100 طريقة مختلفة لظهور أحد الأشياء الخاصة بك.

يمكن اعتبار هذا مشابهًا إلى الحد الأدنى من 99 ^ 2 تحويلات حالة ممكنة نظريًا لكل كائن من الكائنات.

هل هذه التحولات في الحالة مأساوية في الشكل / الحجم / اللون ، لكنها لا تزال محددة بشكل جيد ومحددة ويمكن التحكم فيها؟ إذا كان الأمر كذلك ، فإن التخزين المؤقت مرة واحدة فقط 100 ظهور مختلف لاستخدامها من قبل جميع الأشياء الخاصة بك يمكن أن يكون تحسنا كبيرا في الأداء.

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

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

Question

يحتوي مشروعي على قماش HTML5 يتم رسم الكائنات الرسومية عليه بشكل متكرر. هذه الأشياء تتغير بسرعة. رسمها يستغرق وقتًا. كيف يمكنني جعله أسرع؟

الكائنات ليست معقدة للغاية ولكنها تحتوي على أشياء مثل الأقواس والتدرجات والمضلعات.

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

يجب أن يعمل كل شيء على العميل (بمعنى أنه لا يمكنني استخدام الصور الجاهزة)

  1. ما هي أفضل طريقة للقيام بذلك باستخدام HTML5 Canvas؟
  2. هل هي فكرة جيدة على الإطلاق أم أن النفقات العامة للعمل مع الصور النقطية أكبر من إعادة رسم الكائنات في كل مرة؟





Links