logo image
메인
기술
HOME
기술

canvas에서 문자열 측정값. baseline 기준 하단 상단 높이 측정. fontBoundingBoxAscent, fontBoundingBoxDescent

1
목록
#canvas #measuretext
const textMetrics = ctx.measureText("foo")



textMetrics.fontBoundingBoxAscent; // 폰트 baseline에서부터의 상단 높이. (폰트에 포함된 글자 중 가장큰 값을 가지는 글자의 상단 높이)
textMetrics.fontBoundingBoxDescent ; // 폰트 baseline에서부터의 하단 높이. (폰트에 포함된 글자 중 가장큰 값을 가지는 글자의 하단 높이)

textMetrics.actualBoundingBoxAscent; // 그려지는 문자열 기준 baseline에서부터의 상단 높이.
textMetrics.actualBoundingBoxDescent; // 그려지는 문자열 기준 baseline에서부터의 하단 높이.

actualBoundingBoxAscent 와 actualBoundingBoxDescent 는 문자열에 따라서 달라진다.
특히 y 같이 밑이 긴 문자가 들어가면 actualBoundingBoxDescent 값이 더 커진다.

다른 문자열과 일관적으로 보이게 하려면
fontBoundingBoxAscent, fontBoundingBoxDescent 를 사용하라
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
2.1
2.2
2.3
2.4
2.5
2.6
2.7
2.8
2.9
2.10
2.11
2.12
2.13
2.14
2.15
2.16
2.17
2.18
2.19
2.20
2.21
2.22
2.23
2.24
2.25
2.26
2.27
2.28
tag