如何消除 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中文網其他相關文章！