캔버스에 텍스트 그리기
캔버스에 텍스트를 그리려면, 가장 중요한 특성 및 방법은 다음과 같습니다 :
- font - 텍스트의 글꼴 속성을 정의
- fillText( text,x,y ) - 그립니다 "filled" 캔버스에 텍스트를
- strokeText( text,x,y ) - 캔버스에 텍스트를 그립니다 (no fill)
사용 fillText()
예
30 픽셀에 글꼴 설정 "Arial" 캔버스에 채워진 텍스트를 작성 :
자바 스크립트 :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50); »그것을 자신을 시도 사용 strokeText()
예
30 픽셀에 글꼴 설정 "Arial" 캔버스에, 아니 채우기 및 텍스트 쓰기 :
자바 스크립트 :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50); »그것을 자신을 시도 색상 및 센터 텍스트 추가
예
"만화 산세 MS를"30 픽셀 캔버스의 중앙에 가득 빨간색 텍스트를 작성하는 글꼴 설정 :
자바 스크립트 :
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);
»그것을 자신을 시도