Javascript 从画布世界到屏幕口吃

我正在用agar.io的风格编写一个游戏，我想把玩家移动到相对于鼠标位置的方向

这就是我检查鼠标位置的方式，返回一个向量对象

let mouse_vector = new Vector();
canvas.onmousemove = function() {
    mouse_vector = mouse(event);
}

function mouse(evt) {
    mouse_vector =  new Vector(evt.clientX - canvas.width/2, evt.clientY - canvas.height/2);
    return mouse_vector;
}

播放器是一个具有x和y坐标的对象，我在其中添加指向鼠标的向量。我有一块画布，它代表了世界，而且是隐藏的。另一个画布是我的视口，我在其上绘制相对于玩家位置的裁剪世界。
我在这里使用了

requestAnimationFrame

，但我也尝试了使用Interval

function draw() {
    player.x += mouse_vector.x * 0.005;
    player.y += mouse_vector.y * 0.005;
    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
    canvasCtx.drawImage(game, player.x-canvas.width/2, player.y-canvas.height/2, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
    canvasCtx.arc(canvas.width/2, canvas.height/2, player.r, 0, 2*Math.PI);
    canvasCtx.fill();
    requestAnimationFrame(draw);
}

---

我的问题是，随着时间的推移，游戏开始结巴。我希望它能像开始时一样顺利。我怀疑这个问题与某种缓存有关。我注意到这个游戏使用了大量的CPU资源。有什么想法吗？

因此，在一天结束时，您将每隔16毫秒重新绘制整个地图，以获得60fps，这是

requestAnimationFrame

的目标-因此，除非您对绘图进行一些优化，否则您将无法摆脱CPU占用问题

---

关于你正在做的逻辑：从这段代码来看，似乎没有任何东西可能正在积累或泄漏内存，因此我建议将你的代码粘贴到codepen.io之类的代码共享站点，并与社区共享，我们将有更多的机会调试它。

我遇到的问题是在填充圆弧时没有使用

beginPath（）

方法。似乎不重置上一个绘图会逐渐累积并导致性能损失

canvasCtx.beginPath(); // addition
canvasCtx.arc(canvas.width/2, canvas.height/2, player.r, 0, 2*Math.PI);
canvasCtx.fill();