基础

画布除了绘制图形以外还可以绘制文本，画布中的文本可以设置字体大小、字体格式、对齐方式（横向和纵向对齐方式），并且还可以制作很炫酷的文本，比如渐变文字。

文本有以下三个属性，控制文本的字体大小、字体格式和对齐方式：

属性	描述
font	设置或返回文本内容的当前字体属性
textAlign	设置或返回文本内容的当前对齐方式
textBaseline	设置或返回在绘制文本时使用的当前文本基线

完成文本的绘制有 fillText 和 strokeText：

方法	描述
fillText(text, x, y)	在画布上绘制有填充文本
strokeText(text, x, y)	在画布上绘制无填充文本
measureText(text)	返回包含指定文本宽度对象

方法

fillText

fillText 用于绘制非镂空的文本，即文字是完全填充的：

ctx.beginPath();

ctx.font = '25px Georgia';

ctx.fillText('Hello World!', 150, 150);

strokeText

strokeText 用于绘制镂空的文本：

ctx.beginPath();

ctx.font = '25px Georgia';

ctx.strokeText('Hello World!', 150, 150);

属性

textAlign

文本对于 Y 轴的对齐方式，用 textAlign 设置，有以下五个属性值：

属性值	描述
left	文字左对齐
center	文字中间对齐
right	文字右对齐
start	文字左对齐，与 left 等效
end	文字右对齐，与 right 等效

ctx.font = '15px Georgia';

ctx.beginPath()

ctx.textAlign = 'start'; // 文字左对齐，与 left 等效

ctx.fillText('(start)Hello World!', 150, 20);

ctx.beginPath()

ctx.textAlign = 'left'; // 文字左对齐，与 start 等效

ctx.fillText('(left)Hello World!', 150, 80);

ctx.beginPath()

ctx.textAlign = 'center'; // 文字句中对齐

ctx.fillText('(center)Hello World!', 150, 140);

ctx.beginPath()

ctx.textAlign = 'end'; // 文字右对齐，与 right 等效

ctx.fillText('(end)Hello World!', 150, 200);

ctx.beginPath()

ctx.textAlign = 'right'; // 文字右对齐，与 end 等效

ctx.fillText('(right)Hello World!', 150, 260);

textBaseline

textAlign 代表文本以 Y 轴的对齐方式，textBaseline 就是文本以 X 轴的对齐方式，同样也有五个属性值，也有两个属性值互为等效：

属性值	描述
top	位于 Y 轴的下面，顶在 Y 轴
bottom	位于 Y 轴的上面，文本底部与 Y 轴贴合
middle	位于 Y 轴的中间，Y 轴穿过文本
alphabetic	与 bottom 等效
hanging	与 top 等效

巴特西

Canvas 非线性图形（一）：文本

基础

方法

fillText

strokeText

属性

textAlign

textBaseline

最新文章

热门文章