HTML 5画布性能

Question

我刚开始尝试使用canvas HTML5对象。为了进行性能测试，我制作了一个小的乒乓球游戏。

有没有可以提高性能的改进方法？

球似乎是蓝色带一点红色，但我的声明应该是黄色。我该如何修复这个问题？

- Vilius

---

请问您能把这个话题转化成问题吗？您具体想要解决什么问题？ - Robusto

我试图用黄色填充我的球，但它不知何故变成了蓝色 - 就像挡板一样... - Vilius

我认为你有多个间隔正在运行。 - elias

我已经上传了游戏的新版本。现在我将drawBall方法放在draw()的末尾，这样前景颜色就保持为白色（我已经从黄色改为白色）。但是球上还有一个小蓝色“尾巴” - 可能是第二个间隔？ - Vilius

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()是用于填充路径。

简单的乒乓球游戏没有太多可以改进的地方，但我会给出一些关于canvas性能的一般建议：

• fillStyle/strokeStyle调用很昂贵，请避免频繁切换颜色。
• 绘制复杂形状也很昂贵。您可以先绘制它们，然后使用像素API来渲染它们。
• 尝试保持渲染和处理分离，这将为您提供改进的空间。
• 尝试使用纯js进行高FPS游戏/动画。

如上所述，这些都是非常一般的建议，可能并不适用于每种情况。

- elias

---

刚试了一下，但没有任何区别。正如 Mozilla 主页上所说：“注意：调用 fill 方法时，任何打开的形状都将自动关闭，不需要使用 closePath 方法。” - 我就是不明白为什么它不起作用。 - Vilius

好的，非常感谢——移除fill()方法就是解决方案！ - Vilius