HTML 5 Canvas Performance

Question

Я только начал играть с холстом HTML5-объектом. Ради тестов производительности я немного сделал 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;
};

Заполните () не применяется к FillRect (), последний рисует заполненный ректир и заполнение () - это заполнить пути.

Там не так много, вы можете улучшить с простой игрой понга, но я дам несколько общих советов для производительности холста:

• Заводы / крепкие звонки дороги, избегайте переключения цветов.
• Рисование сложных форм тоже дорого. Вы можете нарисовать тогда и использовать Pixel API, чтобы сделать их
• Попробуйте сохранить рендеринг и обработку отделяться, это даст вам место для улучшений
• Попробуйте использовать чистые JS для High FPS Games / Animations

Как сказал, очень общие советы и могут не подходить для каждого случая.