Skip to main content

Canvas 文本绘制

一、绘制方法​

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

  • strokeText(text, x, y [, maxWidth])：在 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的；
  • fillText(text, x, y [, maxWidth])：在 (x,y) 位置填充指定文本，绘制的最大宽度是可选的。

示例：

ctx.strokeText('Hello!', 50, 50)
ctx.fillText('Hello!', 50, 70)

效果如下：

二、文本样式​

1、字体样式​

font 用于设置当前字体样式，取值和 CSS 中的 font 属性一样，默认字体是 10px sans-serif。

定义 font 属性后，后面的文本都会应用这些属性，直到 font 属性重新定义。

示例：

ctx.font = "bold 48px serif";
ctx.fillText('Hello!', 35, 90)

效果如下：

2、水平对齐方式​

textAlign 用于设置文本的水平对齐方式，默认为 start，可选值：

  • start（默认）：文本在指定的横坐标开始；
  • end：文本在指定的横坐标结束；
  • left：左对齐；
  • center：文本的中心被放置在指定的横坐标；
  • right：右对齐。

示例：

ctx.font = 'bold 18px serif';

ctx.textAlign = 'start';
ctx.fillText('start', 80, 20)

ctx.textAlign = 'end';
ctx.fillText('end', 80, 50)

ctx.textAlign = 'left';
ctx.fillText('left', 80, 80)

ctx.textAlign = 'center';
ctx.fillText('center', 80, 110)

ctx.textAlign = 'right';
ctx.fillText('right', 80, 140)

效果如下：

注意

direction 属性会对此属性产生影响：

如果 direction = ltr，则 left 和 start 的效果相同，right 和 end 的效果相同； 如果 direction = rtl，则 left 和 end 的效果相同，right 和 start 的效果相同。

3、垂直对齐方式​

textBaseline 用于设置文本的垂直对齐方式，默认为 alphabetic，可选值：

  • top：文本基线在文本块的顶部；
  • hanging：文本基线是悬挂基线；
  • middle：文本基线在文本块的中间；
  • alphabetic（默认）：文本基线是标准的字母基线；
  • ideographic：文字基线是表意字基线，如果字符本身超出了 alphabetic 基线 那么 ideographic 基线位置在字符本身的底部；
  • bottom：文本基线在文本块的底部。

效果如下：

4、文本顺序​

direction 用于设置当前文本顺序，默认为 ltr，可选值：

  • ltr（默认）：文本方向从左向右；
  • rtl：文本方向从右向左；
  • inherit：继承；

示例：

ctx.font = 'bold 18px serif';

ctx.direction = 'ltr';
ctx.fillText('Hello!', 80, 20)

ctx.direction = 'rtl';
ctx.fillText('Hello!', 80, 50)

效果如下：

三、获取文本属性​

measureText() 返回一个 TextMetrics 对象，包含文本的属性（宽度、所在像素），可用于用于获取文本的长度。

示例：

ctx.font = 'bold 18px serif';
ctx.direction = 'ltr';
ctx.fillText('Hello!', 80, 20)

console.log(ctx.measureText('Hello!'))

控制台打印：