p5.j​​s 画布添加不需要的滚动条

Question

我正在使用来自它的父级的值创建一个简单的 p5.js 画布，如下所示：

// 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

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

顺便说一句，我正在 Chrome 上进行测试。

Answer 1

HTML canvas 元素默认是内联元素（内联元素列表）。因此，即使您将它的高度设置为与它的父级完全相同，它也会因行间距而溢出。为防止将画布设置为 SASS 文件中的块级元素。#canvas     display: block;