Canvas 世界到屏幕卡顿

Question

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

这是我检查鼠标位置的方式，返回一个 Vector 对象；

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 坐标的对象，我向其添加了指向鼠标的矢量。我有 1 个 canvas 代表世界并且是隐藏的。另一个 canvas 是我的视口，我在上面绘制相对于玩家位置的裁剪世界。
我在这里使用 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 电量。有什么想法吗？

Answer 1

所以在一天结束时，您将每 16 毫秒 re-drawing 整个地图以获得 60fps，这是 requestAnimationFrame 的目标 - 所以您不会逃避 CPU 占用问题，除非你对绘图做一些优化。

关于你正在做的逻辑：从这段代码来看似乎没有任何可能正在建立或泄漏内存的东西，所以我建议将你的代码粘贴到 code-sharing 站点喜欢 codepen.io 并与社区分享，我们将有更多机会调试它。

Answer 2

我遇到的问题是我在填充圆弧时没有使用 beginPath() 方法。似乎不重置之前的绘制会随着时间的推移而累积并导致性能下降。

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

Canvas 世界到屏幕卡顿

Canvas World to Screen stuttering

javascript

onmousemove

dom-events

html5-canvas

requestanimationframe