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

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

将画布作为

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 >  <canvas id="myCanvas" width="300" height="120">  </canvas></div>