HTML 참조 매뉴얼

HTML 태그 모든 것

HTML canvas fillText() 메서드

fillText()는 Canvas 2D API 在 (x, y) 위치에 텍스트를 채우는 메서드입니다. 옵션의 네 번째 파라미터가 제공되면 텍스트가 최대 너비에 맞게 조정됩니다.

在线示例

使用 fillText()，在画布上使用渐变写文本 "基础教程网!" 和 "oldtoolbag.com!"：

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas fillText() 方法使用-基础教程(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 태그.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("基础教程网!",10,50);
ctx.font="30px Verdana";
//　创建一个渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　填充一个渐变
ctx.fillStyle=gradient;
ctx.fillText("oldtoolbag.com!10,90);
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IE파이어폭스오페라ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 및 Safari는 fillText()를 지원합니다. 메서드.

주의:Internet Explorer 8 과 이전 버전은 <canvas> 요소를 지원하지 않습니다.

주의:Safari는 maxWidth 파라미터를 지원하지 않습니다.

정의 및 사용법

fillText() 메서드는 캔버스에 채우는 텍스트를 그립니다. 텍스트의 기본 색상은 검은색(#000000)입니다.

고려사항:이렇게 사용하세요 font 속성을 사용하여 글꼴과 크기를 정의하고 fillStyle 또 다른 색상으로/텍스트를 렌더링하는 데 사용하는 기하학적 그래픽을 사용하여 텍스트를 렌더링.

JavaScript 문법:	context.fillText(text,x,y,maxWidth);

파라미터 값

파라미터	설명
text	캔버스에 출력되는 텍스트를 정의.
x	캔버스에 텍스트를 그리기 시작하는 x 좌표 위치(캔버스 상대적)
y	캔버스에 텍스트를 그리기 시작하는 y 좌표 위치(캔버스 상대적)
maxWidth	선택 사항. 최대 텍스트 너비, 픽셀로 측정.

HTML canvas 참조 설명서

HTML: <template> 태그