【canvas】canvas基础使用（十）：文本样式

简言

canvas上下文有一些属性可以更改文本的样式。

文本样式

font 字体设置

CanvasRenderingContext2D.font 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。使用和 CSS font 规范相同的字符串值。
语法：
ctx.font = value;
选项：

• value
  符合 CSS font 语法的DOMString 字符串。默认字体是 10px sans-serif。font语法。

示例

 const canvas1 = document.getElementById('canvas1');
      if (canvas1.getContext) {
        const ctx = canvas1.getContext('2d')
        ctx.font = "small-caps bold 24px/1 sans-serif";
        ctx.fillText("Hello world", 10, 50);
        ctx.strokeText("Hello world", 10, 70);
        const text = ctx.measureText("Hello world")

        console.log(text);

      }

textAlign 文本对齐设置

CanvasRenderingContext2D.textAlign 是 Canvas 2D API 描述绘制文本时，文本的对齐方式的属性。注意，该对齐是基于 CanvasRenderingContext2D.fillText 方法的 x 的值。
语法:
ctx.textAlign = “left” || “right” || “center” || “start” || “end”;
选项值：

• left
  文本左对齐。

• right
  文本右对齐。

• center
  文本居中对齐。

• start
  文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

• end
  文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）。

默认值是 start。

示例

const canvas = document.getElementById("canvas");
canvas.width = 350;
const ctx = canvas.getContext("2d");
const x = canvas.width / 2;

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("left-aligned", x, 40);

ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);

ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);

textBaseline 基线对齐设置

CanvasRenderingContext2D.textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。

相当于垂直方向的对齐

语法：
ctx.textBaseline = “top” || “hanging” || “middle” || “alphabetic” || “ideographic” || “bottom”;
选项值：

• top
  文本基线在文本块的顶部。

• hanging
  文本基线是悬挂基线。

• middle
  文本基线在文本块的中间。

• alphabetic
  文本基线是标准的字母基线。

• ideographic
  文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。

• bottom
  文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

默认值是 alphabetic。

示例

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const baselines = [
  "top",
  "hanging",
  "middle",
  "alphabetic",
  "ideographic",
  "bottom",
];
ctx.font = "36px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  ctx.textBaseline = baseline;
  const y = 75 + index * 75;
  ctx.beginPath();
  ctx.moveTo(0, y + 0.5);
  ctx.lineTo(550, y + 0.5);
  ctx.stroke();
  ctx.fillText(`Abcdefghijklmnop (${baseline})`, 0, y);
});

direction 文本绘制方向

CanvasRenderingContext2D.direction 是 Canvas 2D API 用来在绘制文本时，描述当前文本方向的属性。
语法：
ctx.direction = “ltr” || “rtl” || “inherit”;
选项值：

• ltr
  文本方向从左向右。

• rtl
  文本方向从右向左。

• inherit
  根据情况继承 元素或者 Document 。

默认值是 inherit。中国区域默认是ltr书写方向。

示例

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.fillText("Hi!", 150, 50);
ctx.direction = "rtl";
ctx.fillText("Hi!", 150, 130);

结语

结束了。