画布底部有空白并且滚动太远

Question

我正在使用此答案在div中滚动画布。我也隐藏了滚动条。问题在于它似乎滚动得太远，在这种情况下，如果向下滚动，您会看到画布所在的div的红色。

我尝试过弄乱填充和边距以及不同的大小，但是没有运气。

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = '#00aa00'

ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle = '#fff'

ctx.font='12pt A'

ctx.fillText("scroll here to see red from screen div", 30, 50);


.screen {

  background: red;

  height: 100px;

  width: 300px;

  overflow: auto;

  border-radius: 20px;



}



::-webkit-scrollbar {

  width: 0px;

  height: 0px;

}


<div class="screen">

  <canvas id="myCanvas" width="300" height="120">

  </canvas>

</div>

我如何才能使其仅滚动到画布的末尾，而不在下面显示任何容器div？

谢谢！

Answer 1

将画布作为block元素。默认情况下，canvas是一个内联元素，其行为与img;
相似。因此，由于垂直对齐，您将出现空白问题div内的图像在图像下方有多余的空间

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = '#00aa00'

ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle = '#fff'

ctx.font='12pt A'

ctx.fillText("scroll here to see red from screen div", 30, 50);


.screen {

  background: red;

  height: 100px;

  width: 300px;

  overflow: auto;

  border-radius: 20px;

}

canvas {

 display:block;

}



::-webkit-scrollbar {

  width: 0px;

  height: 0px;

}


<div class="screen">

  <canvas id="myCanvas" width="300" height="120">

  </canvas>

</div>