font 属性利用的语法与 CSSfont 属性相同。

默认值:10px sans-serifjavascript语法:context.font=\"大众italic small-caps bold 12px arial\"大众;

textAlign属性

textAlign 属性根据锚点,设置或返回文本内容确当前对齐办法。

html5背景渐变HTML5 canvas文本渐变特效 Ruby

常日,文本会从指定位置开始,不过,如果您设置为 textAlign=\"大众right\公众 并将文本放置到位置 150,那么会在位置 150 结束。

提示:利用 fillText 或 strokeText 方法在实际地在画布上绘制并定位文本。

默认值:startJavaScript 语法:context.textAlign=\"大众center|end|left|right|start\公众;

textBaseline属性

textBaseline 属性设置或返回在绘制文本时确当前文本基线。

下面的图示演示了 textBaseline 属性支持的各种基线:

注释:fillText 或 strokeText 方法在画布上定位文本时,将利用指定的 textBaseline 值。

默认值:alphabeticJavaScript 语法:context.textBaseline=\公众alphabetic|top|hanging|middle|ideographic|bottom\公众;

fillText方法

fillText 方法在画布上绘制填色的文本。
文本的默认颜色是玄色。

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

JavaScript 语法:

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

参数值

参数描述text规定在画布上输出的文本。
x开始绘制文本的 x 坐标位置(相对付画布)。
y开始绘制文本的 y 坐标位置(相对付画布)。
maxWidth可选。
许可的最大文本宽度,以像素计。

strokeText方法

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

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

JavaScript 语法:

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

measureText方法

measureText 方法返回包含一个工具,该工具包含以像素计的指定字体宽度。

提示:如果您须要在文本向画布输出之前,就理解文本的宽度,那么请利用该方法。

JavaScript 语法:

context.measureText(text).width;

参数值

代码实例:

代码:

此处内容须要登录才可见

其余还可以设置笔墨透明度:globalAlpha,画布的阴影:shadowColor、shadowOffsetX、shadowOffsetY等