Canvas fillText() 메서드

Canvas 참조 매뉴얼

정의와 사용법

fillText() 메서드를 사용하여 캔버스에 채색된 텍스트를 그립니다. 텍스트의 기본 색상은 검정입니다.

ヒント:이렇게 사용하세요 font 속성을 사용하여 글꼴과 크기를 정의하고 fillStyle 텍스트를 다른 색상/점진적으로 렌더링하는 속성

예제

fillText() 메서드를 사용하여 캔버스에 "Hello world!"과 "codew3c.com" 텍스트를 씁니다:

브라우저에서 HTML5 캔버스 태그를 지원하지 않습니다.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 점진적 채색을 생성
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 점진적 채색을 사용하여 채색
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

직접 시도해 보세요

문법

context.fillText(text,x,y,maxWidth);

매개변수 값

매개변수 설명
text 캔버스에 출력할 텍스트를 정의합니다.
x 텍스트를 그리기 시작할 x 좌표 위치(캔버스에 대한 상대적 위치)
y 텍스트를 그리기 시작할 y 좌표 위치(캔버스에 대한 상대적 위치)
maxWidth 선택할 수 있습니다. 텍스트 너비의 최대 허용값(픽셀 단위)

브라우저 지원

표에 나타난 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

Canvas 참조 매뉴얼