Canvas 메서드를 사용하여 JavaScript에서 텍스트 너비를 어떻게 계산할 수 있나요?

JavaScript로 텍스트 너비를 계산하는 방법

JavaScript를 사용하여 문자열 너비를 계산하는 것은 즉시 간단하지 않으며, 특히 고정 폭이 아닌 서체를 사용할 경우 더욱 그렇습니다. 여기서는 HTML 5의 Canvas.measureText 메서드를 사용하는 솔루션을 살펴봅니다.

텍스트 너비 계산을 위한 HTML 5 Canvas 메서드

Canvas.measureText를 사용하려면 캔버스 컨텍스트를 생성하고 할당합니다. 원하는 글꼴 스타일. 그런 다음 측정 텍스트 메서드를 사용하여 지정된 텍스트의 너비를 측정합니다.

function getTextWidth(text, font) {
  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  const context = canvas.getContext("2d");
  context.font = font;
  const metrics = context.measureText(text);
  return metrics.width;
}

예를 들어 "hello there!"의 너비를 계산합니다. "bold 12pt arial" 글꼴에서는 다음을 수행할 수 있습니다.

console.log(getTextWidth("hello there!", "bold 12pt arial"));  // close to 86

CSS 글꼴 스타일 사용

특정 요소의 글꼴 크기를 사용하려면 getCanvasFont를 사용할 수 있습니다. 유틸리티 기능:

const fontSize = getTextWidth(text, getCanvasFont(myEl));

캔버스의 장점 방법

DOM 기반 방법과 비교하여 캔버스 방법에는 여러 가지 장점이 있습니다.

• 간결함 및 안전성: 전역 상태나 DOM을 변경하지 않습니다.
• 사용자 정의: textAlign 및 textBaseline.

Notes

• DOM에 텍스트를 추가할 때 패딩, 여백 및 테두리 효과를 고려하세요.
• 일부 브라우저에서는 Canvas 메서드 하위 픽셀 정확도(부동 소수점 결과)를 제공하는 반면, 다른 경우에는 정수로만 정확합니다.
• In Firefox 방식의 Canvas 방식은 DOM 기반 방식보다 훨씬 빠릅니다.

성능 비교

jsperf 벤치마크 결과 Canvas 방식과 캐싱 DOM 기반 방식의 성능이 비슷한 것으로 나타났습니다. Canvas 방법이 눈에 띄게 빠른 Firefox에서는 예외입니다.

위 내용은 Canvas 메서드를 사용하여 JavaScript에서 텍스트 너비를 어떻게 계산할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!