예
쓰기 "Hello world!" 그리고 "Big smile!" 캔버스에 (그라데이션)를 사용하여 fillText() :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("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.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
»그것을 자신을 시도 브라우저 지원
표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.
| 방법 | |||||
|---|---|---|---|---|---|
| fillText() | 예 | 9.0 | 예 | 예 | 예 |
참고 :의 maxWidth 매개 변수는 사파리 5.1 및 이전 버전에서는 지원되지 않습니다.
정의 및 사용
fillText() 메소드는 캔버스에 가득 텍스트를 그립니다. 텍스트의 기본 색상은 검은 색입니다.
팁 : 사용하여 font 글꼴 및 글꼴 크기를 지정하는 속성을, 그리고 사용 fillStyle 다른 색상 / 그라데이션의 텍스트를 렌더링하는 속성입니다.
| 자바 스크립트 구문 : | context.fillText(text,x,y,maxWidth); |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| text | 캔버스에 기록 할 텍스트를 지정합니다 | »플레이 |
| x | (캔버스에 대해) 텍스트를 그리기 시작 위치를 X 좌표 | »플레이 |
| y | (캔버스에 대해) 텍스트를 그리기 시작하는 곳 y 좌표 | »플레이 |
| maxWidth | 선택 과목. 픽셀 텍스트의 최대 허용 폭 | »플레이 |