实现超酷文本渐变动画，还得看Canvas的文本API【趣学前端】
背景
《HTML5 Canvas 开发详解》这本书我买了挺久的。但是书的文字小，内容多，又不常用，所以有点看不进去。最近睡前会看1小时书，可能是秋季的清爽，又或者藕粉的甜蜜，书读起来比绸缎还丝滑。
今天开始Canvas的第二篇笔记。
文字颜色跑马灯
书中给了一个文字颜色循环跑马灯的实例，是不是很带劲。今天主要分享Canvas中文本的知识点。
https://code.juejin.cn/pen/7136225076914946056
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 <color> 值。 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 颜色值 <color>，将抛出SYNTAX_ERR错误。 |
offset：0到1之间的值，超出范围将抛出INDEX_SIZE_ERR错误 color：CSS 颜色值 <color>。如果颜色值不能被解析为有效的 CSS 颜色值 <color>，将抛出SYNTAX_ERR错误。 |
总结
虽然文本API的属性和方法看着有点陌生，但是仔细一研究，全是“熟人”。几个方法一组合就能将文字玩出花，比如文章开头的跑马灯效果。后续更多效果持续探索中。
今天也是特别有收获的一天。
作者：非职业「传道授业解惑」的开发者叶一一
简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）