画布多个图像和移动浏览器性能

Canvas multiple images and Mobile Browser performance

本文关键字：浏览器 性能 移动 布多个 图像      更新时间：2023-09-26

我正在写关于HTML5画布的移动浏览器性能的文章。我正在尝试制作一个简单的平台游戏（比如超级马里奥兄弟）。我有一个主角，两个敌人和模仿跳台的积木。角色和敌人由drawImage绘制，区块由fillRect绘制（目前，稍后也将是drawImage）。所有内容都设置了动画（当角色移动时，角色X将添加到块X，依此类推）。

现在我正在尝试添加一些随机硬币。首先，我为图像创建了变量

var coinB = new Image();
coinB.src = 'coin.png';

下一步，我将创建带有随机X和Y的对象的数组：

var k;
for (k = 0; k <= 30; k++) {
    coins.push({
        x: Math.floor(Math.random() * 36 + 4) * 100,
        y: Math.floor(Math.random() * 3 + 1) * 100,
        width:25,
        height:25
    });
}

在那之后，我试着选择所有的东西并绘制：

var l;
/* left is the character X for the animation */
for (l = 0; l < coins.length; l++) {
    ctx.drawImage(coinB, coins[l].x - left, coins[l].y, coins[l].width, coins[l].height);
}

所有内容都在requestAnimFrame中的函数（）中。

不幸的是，在那之后，游戏在Mobile FireFox（Chrome Mobile 20-30 fps）上的帧速率约为30fps（之前没有硬币时为60fps）。因此，硬币大约是fps的一半。

有没有更好的方法来导入图像并绘制它们？例如，我对所有的东西都执行new Image()（mainchar=new Image（），敌人=new Images（），硬币=new Image[（）=ect），与.src相同。我认为这不是最好的解决方案。我应该怎么做，以获得更好的性能（减少fps）？谢谢你的帮助。

我也有类似的经历；我一直在寻找技巧和窍门，但没有神奇的方法来解决性能问题。提高性能的关键是将对"drawImage"的调用减少到绝对最小。。。请记住，这是您流程的瓶颈！因此，一定要只画出当前可见的东西（即不要画出视野之外的硬币/方块/背景）。

对于什么样的关注图片加载，我看不出有任何替代你目前正在做的事情。你能做的最好的事情就是使用一个唯一的文件，包含所有的图像，然后在你需要的时候使用正确的部分；这样可以减少下载时间（1个较大的文件比许多较小的文件要好），但不会提高性能。

希望这有点帮助，玩得开心！

相关文章：