背景

《HTML5 Canvas 开发详解》这本书我买了挺久的。但是书的文字小，内容多，又不常用，所以有点看不进去。最近睡前会看1小时书，可能是秋季的清爽，又或者藕粉的甜蜜，书读起来比绸缎还丝滑。

今天开始Canvas的第二篇笔记。

文字颜色跑马灯

书中给了一个文字颜色循环跑马灯的实例，是不是很带劲。今天主要分享Canvas中文本的知识点。

Canvas的文本API

基础文本设置

文本设置离不开几个属性：字体、大小、颜色、粗体。以及需要展示的文字内容。两个基础设置搞定。

ctx.font = 'bold 50px serif';
ctx.fillText(message, 50, 50);

实现

文字属性设置	文字在画布位置	效果展示
文字设置通过设置font属性实现	位置通过fillText()方式实现。

知识点

方法/属性	解释	参数
font	绘制文字时，该属性设置当前字体样式。	主要包括：font-style、font-weight、font-size、font-face。
fillText()	该方法把想要填充的文字以及文本的 (x, y) 坐标传递到画布上。	text：使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。x：文本起点的 x 轴坐标。y：文本起点的 y 轴坐标。

文本居中

文本居中包括水平居中和垂直居中，两种居中使用了两种不同方式。

实现

水平居中	垂直居中	效果展示
measureText()方法帮助文字实现水平居中。	textBaseline基准线帮助文字实现垂直居中。

知识点

方法/属性	解释	参数
measureText()	该方法返回一个关于被测量文本TextMetrics 对象包含的信息（例如它的宽度）。	text：需要测量的String 。
textBaseline	该属性是描述绘制文本时，当前文本基线的属性。	top：文本基线在文本块的顶部。hanging：文本基线是悬挂基线。middle：文本基线在文本块的中间。alphabetic：文本基线是标准的字母基线。ideographic：文字基线是表意字基线；如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。bottom：文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。alphabetic：默认值。

文字轮廓

这个功能可以让文字的空心样式变得非常简单。

实现

文字颜色	实现轮廓	效果展示
将文字颜色设置成白色。（和背景色一致）	strokeStyle属性设置轮廓颜色。strokeText()方法设置轮廓在画布上回显。

知识点

方法/属性	解释	参数
strokeStyle	描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000 (black)。	color：DOMString 字符串，可以转换成 CSS 值。gradient：CanvasGradient 对象（线性渐变或放射性渐变）。pattern：CanvasPattern 对象（可重复的图片）。
strokeText()	在给定的 (x, y) 位置绘制文本的方法。	text：使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。x：文本起始点的 x 轴坐标。y：文本起始点的 y 轴坐标。

设置文字渐变

渐变效果需要设置不同的颜色。

实现

渐变	效果展示
createLinearGradient()方法创建线性对象。CanvasGradient.addColorStop() 方法添加线性偏移值和颜色值。

知识点

方法/属性	解释	参数
createLinearGradient()	该方法返回一个线性 CanvasGradient对象。想要应用这个渐变，需要把这个返回值赋值给 fillStyle 或者 strokeStyle。	x0：起点的 x 轴坐标。y0：起点的 y 轴坐标。x1：终点的 x 轴坐标。y1：终点的 y 轴坐标。
CanvasGradient.addColorStop()	该方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到1之间，将抛出INDEX_SIZE_ERR错误，如果颜色值不能被解析为有效的 CSS 颜色值 ，将抛出SYNTAX_ERR错误。	offset：0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误color：CSS 颜色值 。如果颜色值不能被解析为有效的 CSS 颜色值 ，将抛出SYNTAX_ERR错误。

总结

虽然文本API的属性和方法看着有点陌生，但是仔细一研究，全是“熟人”。几个方法一组合就能将文字玩出花，比如文章开头的跑马灯效果。后续更多效果持续探索中。

今天也是特别有收获的一天。

关于作者