HTML5에서 캔버스에 텍스트를 그리려면 strokeText() 메서드를 사용하세요. 다음은 strokeText() 메서드의 구문입니다. 주어진 x 및 y 좌표로 표시되는 주어진 위치에서 주어진 텍스트를 스트로크합니다. 기본 색상은 검정색입니다.
strokeText(text, x, y [, maxWidth ] )
다음은 strokeText() 메서드의 매개변수 값입니다. -
S. 아니요 | 매개변수 | 설명 |
1 | 텍스트 | 기록할 텍스트 |
2 | X | 그림이 시작되는 x 좌표 |
3 | Y | 그림이 시작되는 x 좌표 |
4 | 최대 너비 | 최대 허용 너비(픽셀) |
예시
HTML5에서 strokeText()를 사용하여 텍스트를 그리기 위해 다음 코드를 실행할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas strokeText()</title> </head> <body> <canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctxt = c.getContext("2d"); ctxt.fillStyle = '#00F'; ctxt.font = "20px Georgia"; ctxt.strokeText("Tutorialspoint", 10, 50); ctxt.fillStyle = '#Cff765'; ctxt.font = "30px Verdana"; ctxt.strokeText("Simply Easy Learning!", 10, 90); </script> </body> </html>