HTML 5 Canvas 性能

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游戏/动画

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