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中添加了一个小的填充物
我还没有看到任何文档详细说明此问题，老实说，直到现在我还没有注意到，填充很小（〜5像素），因此我尝试将小圆圈放在左上角，圆心应该在给定的右边协调但不完全一致，当我们只应看到整个圆圈的四分之一时，我们可以看到整个圆圈...

以下是显示问题的小样本：

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

如何在JavaScript中相对于窗口大小在屏幕上居中显示项目？

1 个答案: