최신 웹 개발 튜토리얼
 

HTML canvas strokeText() Method

<캔버스 개체

쓰기 "Hello world!" 그리고 "Big smile!" (with gradient) 캔버스 사용 strokeText() :

YourbrowserdoesnotsupporttheHTML5canvastag.

자바 스크립트 :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
»그것을 자신을 시도

브라우저 지원

테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.

방법
strokeText() 4.0 9.0 3.6 4.0 10.1

Note: 의 maxWidth 매개 변수는 사파리에서 지원되지 않습니다.


정의 및 사용

strokeText() 메서드는 텍스트립니다 (with no fill) 캔버스에 있습니다. 텍스트의 기본 색상은 검은 색입니다.

Tip: 사용 글꼴 글꼴 및 글꼴 크기를 지정하고 사용하는 속성을 strokeStyle 다른 색상 / 그라데이션의 텍스트를 렌더링하는 속성을.

자바 스크립트 구문 : context . strokeText( text,x,y,maxWidth ) ;

매개 변수 값

매개 변수 기술 플레이
text 캔버스에 기록 할 텍스트를 지정합니다 »플레이
x (Canvas에 상대적) 텍스트를 그리기 시작하는 곳 X 좌표 »플레이
y (Canvas에 상대적) 텍스트를 그리기 시작하는 곳 y 좌표 »플레이
maxWidth 선택 과목. 픽셀 텍스트의 최대 허용 폭 »플레이

<캔버스 개체