为什么我的画布有额外的空白区域和过多的滚动？

Canvas 滚动问题：底部留白且滚动过多

在 div 内滚动 canvas 时，用户可能会遇到两个问题：白色画布底部的空间和过度滚动会显示底层 div 的背景。这主要是由于画布默认的内联元素状态所致。

解决方案：将画布转换为块元素

要解决这些问题，必须将画布转换为块元素块元素。这可以通过 CSS 通过向画布添加属性“display: block”来完成。

垂直对齐

或者，如果将画布转换为块元素是不合适，可以采用垂直对齐。在画布的 CSS 中添加“vertical-align: top”，以确保其与 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; /* or vertical-align:top; */
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

<div class="screen">
  <canvas>

通过实施这些修改，画布现在将滚动到其内容的末尾，而不会显示底层 div 的背景。

以上是为什么我的画布有额外的空白区域和过多的滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！