晚上好,首先我不确定我应该在这里发布这个,因为我几乎不知道这里出了什么问题(唯一的线索是在我尝试“清理”时将所有变量移动到代码顶部之后发生的向上”一点)。
但问题是:我创建了一个 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 相关的内容。
真心希望有人有想法
最佳答案
在使用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();
关于javascript - Canvas 游戏帧率下降,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40293302/