四、绘制文字

1.绘制文本

fillText()

作用：绘制实心文字

语法：

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

参数：

text：文本内容
x，y：文本显示的坐标位置
maxWidth：可选，文本可显示的最大宽度，若小于文本该有的宽度，则文本会被横向缩小

示例：

function draw() {
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.font = "48px serif";
    ctx.fillText("Hello world", 10, 50);
    ctx.fillText("Hello world", 10, 100,100);
}

strokeText()

作用：绘制空心文字

语法：

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

参数：

text：文本内容
x，y：文本显示的坐标位置
maxWidth：可选，文本可显示的最大宽度，若小于文本该有的宽度，则文本会被横向缩小

示例：

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.font = "48px serif";
    ctx.strokeText("Hello world", 10, 50);
    ctx.strokeText("Hello world", 10, 100,100);
}

2.文本样式

可以使用下面一些属性给文本添加样式，属性值和css基本一致

属性	属性默认值	作用
font	10px sans-serif	当前我们用来绘制文本的样式。和 CSS font 属性相同的语法
textAlign	start	文本对齐选项。可选的值包括：start, end, left, right or center
textBaseline	alphabetic	基线对齐选项。可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。
direction	inherit	文本方向。可能的值包括：ltr, rtl, inherit
measureText()	--	`measureText()`方法接受一个字符串作为参数。返回一个 TextMetrics 对象，可以从这个对象上面获取参数字符串的信息目前主要是文本渲染后的宽度（`width`）。

font

用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。

包含以下简写属性：

font-style
font-variant
font-weight
font-size
font-family
font-height

其中必须包含font-size和font-family，不然此属性不生效

语法：

ctx.font = "15px Arial";

textAlign

textAlign属性用来以文本的起点左边的x轴为依据，指定文本的对齐方式。它可以取以下几个值。

left：左对齐
right：右对齐
center：居中
start：默认值，起点对齐（从左到右的文本为左对齐，从右到左的文本为右对齐）。
end：结尾对齐（从左到右的文本为右对齐，从右到左的文本为左对齐）。

function draw() {
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.strokeStyle = "red";
    ctx.moveTo(150, 20);
    ctx.lineTo(150, 170);
    ctx.stroke();

    ctx.font = "15px Arial";

    ctx.textAlign = "start";
    ctx.fillText("textAlign=start", 150, 60);
    ctx.textAlign = "end";
    ctx.fillText("textAlign=end", 150, 80);
    ctx.textAlign = "left";
    ctx.fillText("textAlign=left", 150, 100);
    ctx.textAlign = "center";
    ctx.fillText("textAlign=center", 150, 120);
    ctx.textAlign = "right";
    ctx.fillText("textAlign=right", 150, 140);
}

direction

指定文本的方向，默认值为inherit，表示继承<canvas>或document的设置。其他值包括ltr（从左到右）和rtl（从右到左）。简记如下：

rtl：right to left
ltr：left to right

语法：

ctx.direction =  "inherit" | "rtl" | "ltr";

示例：

function draw() {
    var ctx = document.querySelector("canvas").getContext("2d");
    ctx.beginPath();
    ctx.moveTo(300, 10);
    ctx.lineTo(300, 200);
    ctx.stroke();
    ctx.closePath();

    ctx.font = "20px Arial";
    ctx.direction = "rtl";
    ctx.fillText("direction rtl,从右往左绘制", 300, 60);

    ctx.direction = "ltr";
    ctx.fillText("direction rtl,从左往右绘制", 300, 100);
}

textBaseline

textBaseline属性指定文本的垂直位置，可以取以下值。

top：上部对齐（字母的基线是整体上移）。
hanging：悬挂对齐（字母的上沿在一根直线上），适用于印度文和藏文。
middle：中部对齐（字母的中线在一根直线上）。
alphabetic：默认值，表示字母位于字母表的正常位置（四线格的第三根线）。
ideographic：下沿对齐（字母的下沿在一根直线上），使用于东亚文字。
bottom：底部对齐（字母的基线下移）。对于英文字母，这个设置与ideographic没有差异。

measureText()

measureText()方法接受一个字符串作为参数，返回一个 TextMetrics 对象，可以从这个对象上面获取参数字符串的信息，目前主要是文本渲染后的宽度（width）。

const str = "Hello World!";
const text = ctx.measureText(str);
console.log(text);
ctx.fillText(str, 100, 100,text.width);

letterSpacing

letterSpacing用来控制单个字母间的间距，值为一个以px为单位的字符串，默认值0px

ctx.beginPath();
ctx.font = "30px Arial";
ctx.letterSpacing = "30px";
ctx.fillText("Hello World", 10, 100);

wordSpacing

wordSpacing用来控制单词间的间距，值为一个以px为单位的字符串，默认值0px

ctx.beginPath();
ctx.font = "30px Arial";
ctx.wordSpacing = "100px";
ctx.fillText("Hello World", 20, 100);

四、绘制文字 ​

1.绘制文本 ​

fillText() ​

strokeText() ​

2.文本样式 ​

font ​

textAlign ​

direction ​

textBaseline ​

measureText() ​

letterSpacing ​

wordSpacing ​