예
쓰기 "Hello world!" 그리고 "Big smile!" (with gradient) 캔버스 사용 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
fillText() 메소드는 캔버스에 채워진 텍스트를 그립니다. 텍스트의 기본 색상은 검은 색입니다.
Tip: 사용 글꼴 글꼴 및 글꼴 크기를 지정하는 속성을, 그리고 사용 fillStyle에서는의 다른 색상 / 그라데이션의 텍스트를 렌더링하는 속성을.
| 자바 스크립트 구문 : | context . fillText( text,x,y,maxWidth ) ; |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| text | 캔버스에 기록 할 텍스트를 지정합니다 | »플레이 |
| x | (Canvas에 상대적) 텍스트를 그리기 시작하는 곳 X 좌표 | »플레이 |
| y | (Canvas에 상대적) 텍스트를 그리기 시작하는 곳 y 좌표 | »플레이 |
| maxWidth | 선택 과목. 픽셀 텍스트의 최대 허용 폭 | »플레이 |
<캔버스 개체