Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

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


HTML5에서 캔버스에 텍스트를 그리려면 strokeText() 메서드를 사용하세요. 다음은 strokeText() 메서드의 구문입니다. 주어진 x 및 y 좌표로 표시되는 주어진 위치에서 주어진 텍스트를 스트로크합니다. 기본 색상은 검정색입니다.

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

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

<머리><스타일="너비:14.2314%;">
<스타일="폭:22.4572%;">
<스타일="폭:63.0267%;">
S. 아니요
매개변수
설명
1
텍스트
기록할 텍스트
2
X
그림이 시작되는 x 좌표
3
Y
그림이 시작되는 x 좌표
4
최대 너비
최대 허용 너비(픽셀)

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

예시

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>