文章目录
  1. 1. 渲染文本方式
  2. 2. 文本样式
    1. 2.1. font
    2. 2.2. textAlign
    3. 2.3. textBaseline
    4. 2.4. direction
    5. 2.5. measureText()

学习最好的方式就是一边看文档,一边动手,这样可以加深记忆。关于canvas绘制文本的内容你可以点击此处查看 例子 ,进行更好的互动学习。

渲染文本方式

  1. 填充文本:fillText(text, x, y [, maxWidth])
  2. 边框文本:strokeText(text, x, y [, maxWidth])

参数说明:

  • text:要渲染的文本内容
  • x:开始渲染文本的x坐标
  • y:开始渲染文本的y坐标
  • maxWidth:选填,文本绘制的最大宽度(当文本内容过多的时候,设置的最大宽度又不足以放下这么多文字的时候,文字会被横向压缩以使其可以放下)

当然了,在canvas里面我们也可以像css里去定义样式:

文本样式

font

设置文字的 font-style, font-variant, font-weight, font-size, line-height 和 font-family,用法和css的font语法一致,默认的字体是 10px sans-serif,例如:

1
ctx.font = "24px 'Helvetica Neue','Helvetica','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif";

textAlign

设置文本的水平对齐方式,默认对齐方式是 start,可选值如下:

  1. start:文本对齐界线开始的地方 。
  2. end:文本对齐界线结束的地方 。
  3. left:文本左对齐 。
  4. right:文本右对齐 。
  5. center:文本居中对齐 。

此处的textAlign和css中的text-align 有点区别,css中的text-align 是在父元素上设置,作用在行内元素或者行内块元素上,而此处并没有父元素,直接设置在CanvasRenderingContext2D上,表示方式位设置的对齐方式是设置在人本内容上的start/end/left/right/center,例如:

  1. start:则文本的最左侧的文本对齐界线设置在x坐标。
  2. end:则文本的最右侧的文本对齐界线设置在x坐标。
  3. left:则文本的最左侧的文本设置在x坐标。
  4. right:则文本的最右侧的文本设置在x坐标。
  5. center:则文本的中点位置设置在x坐标,所以说如果要想实现在canvas中的居中,可以将x坐标设置为canvas的一半,使用center对齐方式。

使用方式如下:

1
ctx.textAlign = "left";

textBaseline

设置文本的垂直对齐方式,默认对齐方式是 alphabetic,可选值如下:

  1. top:文本基线在文本块的顶部。
  2. hanging:文本基线是悬挂基线。
  3. middle:文本基线在文本块的中间。
  4. alphabetic:文本基线是标准的字母基线。
  5. ideographic:文字基线是表意字基线;如果字符本身超出了alphabetic 基线,那么ideograhpic基线位置在字符本身的底部。
  6. bottom:文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

看文字有点枯燥而且不具体,看看下面这个图(from the WHATWG)展示了textBaseline属性支持的不同的基线情况:
textBaseline

由于默认对齐方式是alphabetic ,所以当我们不设置y坐标(即为0)时,几乎看不到文字,不过我们如果想按照左上角坐标可以设置为top,如下:

1
ctx.textBaseline = "top";

direction

绘制文本时,描述当前文本方向的属性,默认值:inherit,可选值如下:

  1. ltr:文本方向从左向右。
  2. rtl:文本方向从右向左。

但好像浏览器兼容性不太好,看MDN上说Chrome是已经实现了,访问chrome://flags 进行设置,可我好像设置了也没起作用。

measureText()

measureText()方法返回一个 TextMetrics 对象,包含关于文本尺寸的信息(例如文本的宽度)。

例如:

1
2
var text = ctx.measureText("樊小书生");
text.width;

有了预测量文本宽度我们就可以做很多事,例如事先知道一段字符在canvas中是否可以绘制的下。

文章目录
  1. 1. 渲染文本方式
  2. 2. 文本样式
    1. 2.1. font
    2. 2.2. textAlign
    3. 2.3. textBaseline
    4. 2.4. direction
    5. 2.5. measureText()