web前端开发

您现在的位置是:首页>前端开发

HTML5

【HTML5】canvas的文本

admin:杨小二时间:2020-09-11 19:25:36前端开发0次
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的。

文本

canvas 提供了两种方法来渲染文本:

fillText(text, x, y [, maxWidth])

在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的:

strokeText(text, x, y [, maxWidth])

在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的。

当然,我们也可以改变文本的样式:

属性 描述 范例
font 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 ctx.font="30px Arial";
textAlign 文本对齐选项. 可选的值包括:start, end, left, right, center. 默认值是 start。 ctx.textAlign = 'end'
textBaseline 基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 ctx.textBaseline = 'top'
direction 文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。 ctx.direction = 'ltr'

font属性的语法:

font = 'style variant weight size/line-height family'
  • style(font-style):字体样式,可选值:normal, italic, oblique

  • variant(font-variant):字体变体,可选值:normal, small-caps

  • weight(font-weight):字体粗细,可选值:normal, bold, bolder, lighter, 100 - 900

  • size/line-height:字号和行高

  • family(font-family):字体

文本测量

canvas提供了一个方法:

measureText()

measureText()方法返回的对象中,包含一个名为width的属性,它的值代表你传递给该方法的文本所占据的宽度。

平面设计