如何在 javascript 中将项目与窗口大小在屏幕上居中?

Question

这是我的代码，可以更好地解释我正在尝试做什么。它接近于让它居中，但它总是有点偏离中心。它位于 10,000 x 10,000 像素的画布上。

var winX=window.innerWidth/2; //get the clients browser width
var winY=window.innerHeight/2; //get the clients browser height
function drawPlayer() {
ctx.beginPath();
player.pX=randInt(4,10004); //get random X coordinate
player.pY=randInt(4,10004); //get random Y coordinate
ctx.arc(player.pX, player.pY, circR, 0, 2*Math.PI); //creates the circle that i'm trying to center on the screen
ctx.fillStyle=colors[randInt(0,6)];
ctx.fill();
ctx.closePath();
window.scrollTo((player.pX-winX)-2, (player.pY-winY)-2);
document.body.style.overflow='hidden';
}

起初我以为偏移是因为滚动条，但即使我不隐藏滚动条，圆圈仍然离屏幕中心有点偏离。任何帮助使其正确居中将不胜感激。有时屏幕上只显示圆圈的一半或四分之一，这似乎有点随机，但大多数时候它都靠近中心。

Answer 1

window.scrollTo

似乎添加了一个小填充
我没有看到任何详细说明此问题的文档，老实说，直到现在我才注意到，填充很小(~5px(，所以我尝试在左上角放小圆圈，圆圈的中心应该在给定的协调上，但并不完全在那里， 我们可以看到整个圆圈，而我们应该只看到它的四分之一......

下面是显示该问题的一个小示例：

document.body.style.overflow = 'hidden';
ctx = document.getElementById('c').getContext('2d');
ctx.beginPath();
for (var i = 0; i < 10; i++ )
ctx.arc(500 + i*20, 500 + i*20, 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
var n = 500
function scroll() {
n = (n == 600) ? 500 : 600;
window.scrollTo({top: n, left: n, behavior: "smooth" });
}
setInterval(scroll, 1000);
scroll()

<canvas id="c" height=10000 width=10000></canvas>

由于您使用的是如此大的画布，因此建议您尝试JS游戏引擎：
https://github.com/collections/javascript-game-engines