performance - HTML 5 画布性能

Question

我刚刚开始玩画布 HTML5 对象。为了性能测试，我做了一个小小的乒乓球游戏。

我可以使用任何性能改进吗？

球似乎是蓝色的，带有淡淡的红色，但我的声明应该是黄色的。我怎样才能解决这个问题？

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()，后者是绘制一个填充的矩形，而 fill() 是填充路径。

一个简单的乒乓球游戏没有什么可以改进的，但我会给出一些关于画布性能的一般建议：

• fillStyle/strokeStyle 调用很昂贵，避免切换颜色。
• 绘制复杂的形状也很昂贵。然后你可以绘制并使用像素 api 来渲染它们
• 尽量保持渲染和处理分离，这会给你改进的空间
• 尝试将纯 js 用于高 FPS 游戏/动画

如前所述，非常笼统的建议，可能并不适合每种情况。