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


Answers

اعتمادا على عدد الكائنات التي يمكن أن تتغير في الثانية، ونتيجة لذلك كم من الكائنات لديك لإعادة رسم وكيف - في نفس ثانية، إعادة رسم أكثر من التخزين المؤقت يمكن أن يكون خيارا تماما.

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

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

ويمكن اعتبار هذا مماثلا للحد الأدنى من 99 ^ 2 من الناحية النظرية ممكن التحولات الوضع لكل من الكائنات الخاصة بك.

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

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

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

Question

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

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

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

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

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