HTML 5 Canvas производительность - PullRequest
Новая
       21

HTML 5 Canvas производительность

4 голосов
/ 18 апреля 2010

Я только начал играть с HTML5-объектом canvas. Ради тестов производительности я сделал небольшую игру в пинг-понг .

Могу ли я улучшить производительность?

Шар кажется синим с оттенком красного, но мое объявление должно быть желтым. Как я могу это исправить?

1 Ответ

4 голосов
/ 18 апреля 2010

Это должно помочь вам с цветом шара; 

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 (), последний рисует закрашенный прямоугольник, а fill () предназначен для заполнения путей.

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

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

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

...