HTML5에서 fillText()로 텍스트를 그리는 방법은 무엇입니까?

<시간/>

HTML5에서 캔버스에 채워진 텍스트를 그리려면 fillText() 메서드를 사용합니다. 다음은 fillText() 메서드의 구문입니다. 주어진 좌표 x와 y가 나타내는 주어진 위치에 주어진 텍스트를 채웁니다. 기본 색상은 검정색입니다.

fillText(text, x, y [, maxWidth ] )

다음은 fillText() 메서드의 매개변수 값입니다.

S. 아니요	매개변수	설명
1	텍스트	기록할 텍스트
2	x	x 좌표
3	y	y 좌표
4	maxWidth	최대 허용 너비(픽셀)

HTML5에서 fillText()로 텍스트를 그리는 방법은 무엇입니까?

예시

다음 코드를 실행하여 HTML5에서 fillText()를 사용하여 텍스트를 그릴 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas fillText()</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.fillText("Tutorialspoint", 10, 50);
         ctxt.fillStyle = '#Cff765';
         ctxt.font = "30px Verdana";
         ctxt.fillText("Simply Easy Learning!", 10, 90);
      </script>
   </body>
</html>