p5.js canvas 添加不需要的滚动条

Question

我正在创建一个简单的 p5.js canvas，使用其父项的值，如下所示：

// Canvas properties
var $musicscape = $("#musicscape");

// p5.js functions
function setup() {
    var canvas = createCanvas(
        $musicscape.outerWidth(),
        $musicscape.outerHeight()) ;
    canvas.id("canvas")
    canvas.parent($musicscape[0]);
}

我的 musicscape 元素具有以下 sass 属性，并且在不创建任何滚动条的情况下采用正确的大小。

#musicscape
    position: absolute
    right: 0
    top: 0
    width: 50vw
    height: 100vh

这里是a jsfiddle which shows the error.

但是，当我添加与 html、body 和 #musicscape 元素大小相同的 canvas 时，会添加一个垂直滚动条。删除它的唯一方法是将 canvas 宽度设置为 $musicscape.outerHeight() - 3，这也会在底部创建一条不属于 canvas 的小白线。 如何在保持 canvas 与其父级大小相同的同时去掉垂直滚动条？ 我检查了一下，页面上的任何地方都没有填充或边距。

我正在测试 Chrome 顺便说一句。

Answer 1

HTML canvas 元素默认为内联元素 (list of inline elements)。因此，即使您将它的高度设置为与它的父级完全相同，它也会因为 line-spacing 而溢出。为防止它在您的 SASS 文件中将 canvas 设置为块级元素。

#canvas
    display: block;

Answer 2

CSS 灵活的盒子布局模块
index.html

<!DOCTYPE html>
    <html>
<link rel="stylesheet" href="noscrollbars.css">
    <head>
      <meta charset="UTF-8" />
      <script src="p5.js"></script>
      <script src="myscript.js"></script>
    </head>  <body>  <main> </main> </body>
</html>

noscrollbars.css

html, body {
    height: 100%;
}
    body {
    margin: 0;
    display: flex;
        
    justify-content: center;
    align-items: center;
}

p5.js canvas 添加不需要的滚动条

p5.js canvas adds unwanted scrollbar

html

javascript

canvas

scrollbar

p5.js