javascript - p5.j​​s 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 )。 因此，即使您将其高度设置为与其父级完全相同，它也会由于行间距而溢出。为了防止这种情况，将 canvas 设置为 SASS 文件中的 block 级元素。

#canvas
    display: block;