css - Canvas 底部有空白并且滚动得太远

Question

<分区>

Answer 1

使 Canvas 成为 block 元素或使用vertical-align:top。默认情况下，canvas 是一个内联元素，它的行为类似于 img；因此，由于垂直对齐(Image inside div has extra space below the image)，您将遇到空白问题

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>