為什麼我的畫布有額外的空白區域和過多的滾動？-css教學-PHP中文網

為什麼我的畫布有額外的空白區域和過多的滾動？

Mary-Kate Olsen

發布： 2024-12-14 02:58:10

原創

442 人瀏覽過

Why Does My Canvas Have Extra White Space and Excessive Scrolling?

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;
}

登入後複製