HTML canvas strokeText() 方法

定义和用法

strokeText() 方法在画布上绘制文本(没有填色)。文本的默认颜色是黑色。

提示:请使用 font 属性来定义字体和字号,并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。

实例

使用strokeText(),在画布上写文本 "Hello world!" 和 "codew3c.com":

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.strokeText("Hello World!",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.strokeStyle=gradient;
ctx.strokeText("codew3c.com",10,90);

직접 테스트해 보세요

문법

context.strokeText(text,x,y,maxWidth);

파라미터 값

파라미터 설명
text 캔버스에 출력할 텍스트를 정의합니다.
x 텍스트를 그리기 시작할 x 좌표 위치(캔버스에 대한 상대적 위치)
y 텍스트를 그리기 시작할 y 좌표 위치(캔버스에 대한 상대적 위치)
maxWidth 선택 사항. 최대 텍스트 너비는 픽셀로 계산됩니다.

브라우저 지원

표에서는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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