如何在 JavaScript（chrome 网络浏览器）中为 createCanvas(window.innerWidth, window.innerHeight) 重新定义 window 的来源？

Question

我开始使用 p5.js 库 javascript，我注意到了这一点： canvas NOT positioned in top left corner

当我创建一个 canvas 时，它位于笛卡尔平面的原点。但是原点不在window的左上角。实际上，原点 (0, 0) 位于 (8, 8)，左上角位于 (-8, -8)。（也许）你可以看到这个 "offset" 运行片段。

那么如何将原点 (0, 0) 重新定位到左上角呢？要么如何将创建的 canvas 重新定位到左上角？

（这发生在 Chrome 和 Edge 中，但在 Firefox 中工作正常。我在 Wwindows 10）。

这没有用：https://github.com/processing/p5.js/wiki/Positioning-your-canvas

function setup() {
  var cnv = createCanvas(windowWidth, windowHeight);
  background(0);
}

function draw() {
  fill(0, 255, 0);
  rect(0, 0, 30, 30);
  console.log(mouseX, mouseY);
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
  <script src="test.js"></script>
  <title>index</title>
</head>

<body>

</body>

</html>

Answer 1

与 this 相关。要重新定位，您可以尝试设置 body:

的样式

html, body
{
    margin: 0px; padding: 0px
}

或将 parent 元素分配给 canvas 并为其设置样式。

如何在 JavaScript（chrome 网络浏览器）中为 createCanvas(window.innerWidth, window.innerHeight) 重新定义 window 的来源？

How do I redefine the origin of the window for createCanvas(window.innerWidth, window.innerHeight) in JavaScript (chrome web browser)?

javascript

p5.js