屏幕底部的小白线使用 p5.js

Question

我是 p5.js 的新手，我只是想创建一个全屏 canvas 但我在屏幕底部看到一条小白线，我无法弄清楚为什么

function setup() {
    createCanvas(windowWidth, windowHeight);
    //background(0);
}

function draw() {
    background("#222");
    ellipse(windowWidth / 2, windowHeight / 2, 100, 100);
    fill("#07C");
    noStroke();
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>p5.js starter</title>
    <style>
        body {
            /* padding: 0; */
            margin: 0;
            overflow: hidden;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
    <!-- Uncomment below line to enable p5.sound -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js"></script> -->
</head>

<body>
    <script src="sketch.js"></script>
</body>

</html>

这是当地的样子

如果您在新标签页中打开图片，您会注意到这个问题

编辑：该问题仅在 chrome 中发生，在 firefox 和 brave

中没有问题

Answer 1

你应该尝试做的第一件事是将 + 10 添加到 windowHeight 或任何足以删除这条白线的数字，如果这不起作用那么它可能与你正在使用的浏览器有关使用。

Answer 2

正在将样式更改为

        * {
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
        }

已解决问题

屏幕底部的小白线使用 p5.js

small white line at the bottom of the screen using p5.js

html

javascript

css

p5.js