내 캔버스에 여분의 공백과 과도한 스크롤이 있는 이유는 무엇입니까?

캔버스 스크롤 문제: 하단 공백 및 과도한 스크롤

div 내에서 캔버스를 스크롤할 때 사용자는 두 가지 문제에 직면할 수 있습니다. 캔버스 하단의 공간과 기본 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!