Canvas绘制文字主要用fillText()和strokeText()方法，结合font、textAlign、textBaseline等属性设置样式与布局，支持阴影、渐变等效果，需先设样式再绘制。
在HTML5的Canvas中绘制文字，主要依赖于fillText()和strokeText()这两个方法。通过设置字体样式、对齐方式、颜色等属性，可以实现丰富的文本效果。
1. 基本文字绘制方法
使用fillText(text, x, y)可以在指定位置填充实心文字；使用strokeText(text, x, y)则绘制空心（描边）文字。
-
text：要绘制的文字内容 -
x, y：文字在画布上的起始坐标（注意：y是基线位置）
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '30px Arial';
ctx.fillText('Hello Canvas', 50, 100);
ctx.strokeText('Outline Text', 50, 150);
2. 设置字体样式
通过ctx.font属性可设置字体大小、字族、粗细等，格式与CSS类似。
- 语法：
ctx.font = 'italic bold 24px sans-serif'; - 支持常见字体如Arial、Georgia，也支持自定义@font-face引入的字体
- 必须在调用
fillText或strokeText前设置
3. 文本对齐与基线控制
Canvas提供文本水平对齐和垂直基线定位的属性，便于精确布局。
立即学习“前端免费学习笔记（深入）”；
-
ctx.textAlign：可设为left、center、right -
ctx.textBaseline：常用值有alphabetic（默认）、top、middle、bottom
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('居中文本', canvas.width/2, canvas.height/2);
4. 添加文本效果
结合其他Canvas特性，可实现阴影、渐变、描边等视觉效果。
- 使用
ctx.shadowColor、shadowBlur添加阴影 - 用
createLinearGradient创建渐变色填充 - 通过
lineWidth和strokeStyle控制描边样式
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'magenta');
gradient.addColorStop(1, 'purple');
ctx.fillStyle = gradient;
ctx.fillText('彩色文字', 60, 200);
基本上就这些。掌握这些方法后，你可以在Canvas中灵活地渲染各种文字内容，配合动画还能做出动态文本效果。关键是先设置样式，再调用绘制方法，顺序不能错。
