fillText()
实例
使用 fillText(),在画布上写文本"Hello world!"和"Big smile!":
JavaScript:
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);
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillText()方法。 | ||||
注意:Internet Explorer 8 及之前的版本不支持<canvas>元素。 注意:Safari 不支持 maxWidth 参数。 |
定义和用法
fillText()方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示:请使用font属性来定义字体和字号,并使用fillStyle属性以另一种颜色/渐变来渲染文本。
JavaScript 语法: | context.fillText(text,x,y,maxWidth); |
---|
参数值
参数 | 描述 |
---|---|
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。 |