Question

晚上好，首先我不确定我是否应该在这里发布，因为我已经不知道这里有什么问题（只有在我将所有变量放在我的代码顶部同时试图“清理”之后才发生这个线索“一点点。”

但问题是：我创建了一个canvas game并在移动我的变量后（我认为）我开始获得主要的框架。游戏重量不到20Ko，图像超小而简单，我在更新循环中有一个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除了如何查看我自己的变量，所以我没有用萤火虫发现了什么。

真的希望有人有个主意

Answer 1

在使用ctx.beginPath()，ctx.rect，moveTo，lineTo以及您需要使用的任何功能arc之前，您需要先添加ctx.stroke()或ctx.fill()看。

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

来自你的小提琴

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();

帆布游戏帧率下降

1 个答案: