HTML 5 Производительность холста

Question

Я только начал играть с холстом HTML5-объекта. Для тестов производительности я сделал немного ping pong game.

Есть ли улучшения в производительности, которые я мог бы использовать?

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

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(), последний рисунок, заполненный rectagle и заполнить(), чтобы заполнить трактов.

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

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

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