HTML 캔버스 텍스트
캔버스에 텍스트 그리기
캔버스에 텍스트를 그리기 위해 가장 중요한 속성과 메서드는 다음과 같습니다.
- font - 텍스트의 글꼴 속성을 정의합니다.
- fillText( text,x,y ) - 캔버스에 "채워진" 텍스트를 그립니다.
- strokeText( text,x,y ) - 캔버스에 텍스트를 그립니다(채우기 없음)
fillText() 사용
예시
글꼴을 30px "Arial"로 설정하고 캔버스에 채워진 텍스트를 씁니다.
자바스크립트:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
strokeText() 사용
예시
글꼴을 30px "Arial"로 설정하고 캔버스에 채우기 없이 텍스트를 씁니다.
자바스크립트:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
색상 및 중앙 텍스트 추가
예시
글꼴을 30px "Comic Sans MS"로 설정하고 캔버스 중앙에 채워진 빨간색 텍스트를 씁니다.
자바스크립트:
var
canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);