أداء HTML 5 Canvas

Question

لقد بدأت للتو في اللعب مع Canvas HTML5-Object. من أجل اختبارات الأداء ، لقد صنعت القليل لعبة Ping Pong.

هل هناك أي تحسينات في الأداء يمكنني استخدامها؟

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

Answer 1

هذا يجب أن يساعدك في لون الكرة.

function drawBall (x, y, r) {
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill(); //added
    fps++;
}

function drawP1 (h) {
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, h, 20, 100);
    //ctx.fill(); // remove in P2 also
    fps++;
    return true;
};

Fill () لا ينطبق على FillRect () ، فإن الأخير يرسم المستقيم المملوء وملء () هو ملء المسارات.

ليس هناك الكثير مما يمكنك تحسينه من خلال لعبة بونغ بسيطة ، لكنني سأقدم بعض النصائح العامة لأداء القماش:

• مكالمات FillStyle/Strokestyle باهظة الثمن ، وتجنب تبديل الألوان.
• رسم الأشكال المعقدة باهظة الثمن أيضًا. يمكنك الرسم بعد ذلك واستخدام API Pixel لتقديمها
• حاول الاستمرار في التقديم والمعالجة المنفصلة ، وهذا سوف يمنحك مساحة للتحسينات
• حاول استخدام Pure JS للألعاب/الرسوم المتحركة عالية FPS

كما قيل ، نصائح عامة للغاية وقد لا تكون مناسبة لكل حالة.