如何消除 Div 容器中 Canvas 的空白和滚动问题？

解决 Canvas 中的空白和过度滚动

在 div 容器中嵌入 canvas 元素时，可能会出现某些样式问题。一个常见问题是画布底部存在空白以及过度滚动。

原因：
默认情况下，canvas 呈现为内联元素。当放置在块级 div 容器中时，这可能会导致不必要的空白和垂直对齐问题。

解决方案：

1. Make Canvas 块元素：
   更改 canvas 元素的 CSS 以将其显示为块元素：

   canvas {
     display: block;
   }

2. 垂直对齐：
   或者，使用 CSS 垂直对齐将画布正确放置在容器：

   canvas {
     vertical-align: top;
   }

实现：

修改提供的代码如下：

.screen CSS :

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
}
canvas {
  display: block;
}

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

此自定义可确保画布表现为块元素，消除了空白和过多的滚动问题。

以上是如何消除 Div 容器中 Canvas 的空白和滚动问题？的详细内容。更多信息请关注PHP中文网其他相关文章！