javascript - Canvas 游戏帧率下降

Question

晚上好，首先我不确定我应该在这里发布这个，因为我几乎不知道这里出了什么问题(唯一的线索是在我尝试“清理”时将所有变量移动到代码顶部之后发生的向上”一点)。

但问题是:我创建了一个 canvas game在移动我的变量(我认为)之后，我开始出现严重的帧丢失。游戏重量不到 20Ko，图像 super 小且简单，我在更新循环中有一个 for 循环，但它似乎从来都不是问题(它不是无限的)所以简而言之我不知道这里出了什么问题

这里有一些代码，因为代码链接“必须附有代码”(不知道这是怎么回事)

for (var i = 0; i<boxes.length; i++){
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
    var col = coli(player,boxes[i])
};

我尝试过不同的事情，比如禁用函数(动画和碰撞)、摩擦和重力，但似乎没有任何效果，而且除了如何查看我自己的变量之外，我对 dom 不太了解，所以我没有发现任何与 firebug 相关的内容。

真心希望有人有想法

Answer 1

在使用ctx.rect、moveTo、lineTo之前需要添加ctx.beginPath()， arc，以及任何需要使用 ctx.lines() 或 ctx.fill() 才能看到的函数。

beginPath 告诉 Canvas 2D 上下文您希望开始一个新形状。如果您不这样做，您最终会在每次更新时添加越来越多的形状。

从你的 fiddle

function update() {
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = pat;
  //===============================================================
  ctx.beginPath()  // <=== this will fix your problem. It removes all the
  //                       previous rects
  //===============================================================
  for (var i = 0; i < boxes.length; i++) {
    ctx.rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
    // or use ctx.fillRect(...
    var col = coli(player, boxes[i])
  };
  ctx.fill();