0

这是我的代码，可以更好地解释我正在尝试做的事情。它接近于使其居中，但总是偏离中心一点。它位于 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';
}

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

4

1 回答 1

0

似乎添加了一个小填充，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

于 2018-09-26T00:38:11.923 回答