filltext是canvas 2d中用于绘制实心填充文本的核心方法，需先设置font、fillstyle、textbaseline等属性，y坐标对应基线，配合textalign、阴影、渐变等可实现丰富艺术字效果。
fillText 是 Canvas 2D 上下文的内置方法，用于在指定坐标位置绘制**实心填充的文本**（即“艺术字”效果的核心基础）。它本身不直接生成花哨样式，但配合字体设置、颜色、阴影等属性，就能实现丰富的艺术字效果。
基础用法：指定坐标绘制纯色实心文字
调用 fillText(text, x, y) 即可：
- text：要显示的字符串（支持中文、Emoji、Unicode）
- x：文字左基线起点的水平坐标（注意：不是左上角！）
- y：文字左基线起点的垂直坐标（关键！y 对应的是文字基线，不是顶部）
示例：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px "Microsoft YaHei", sans-serif';
ctx.fillStyle = '#ff4466';
ctx.fillText('Hello', 50, 120); // 文字基线落在 y=120 处
让文字真正“居中”或“对齐”——必须理解 textBaseline 和 textAlign
默认 ctx.textBaseline = 'alphabetic'，导致 y 坐标难直观控制。想精准定位（比如让文字垂直居中于某点），需调整对齐方式：
-
垂直对齐：
ctx.textBaseline = 'middle'（y 指向文字正中心）或'top'/'bottom' -
水平对齐：
ctx.textAlign = 'center'（x 指向文字水平中心），配合fillText('Hi', canvas.width/2, canvas.height/2)可轻松居中
做出“艺术字”效果的关键属性组合
仅靠 fillText 不够，需叠加以下属性增强表现力：
-
字体与粗细：
ctx.font = 'bold 60px "STXingkai", cursive'（选手写体、书法体、圆体等提升艺术感） -
渐变填充：
ctx.fillStyle = ctx.createLinearGradient(0,0,200,50); gradient.addColorStop(0,'#ff6b6b'); ...，再用 fillText -
文字阴影：
ctx.shadowColor = 'rgba(0,0,0,0.4)'; ctx.shadowBlur = 8; ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; -
描边+填充双效（伪立体/轮廓字）：
ctx.strokeStyle = '#222'; ctx.lineWidth = 2; ctx.strokeText('Art', x, y); ctx.fillText('Art', x, y);
注意坐标细节：避免文字被截断或错位
Canvas 的 (0,0) 在左上角，y 向下增长。若文字显示不全，常见原因：
- y 值太小（如 y=10），部分字形（如“g”“y”的下伸部）会超出画布顶部；建议 y ≥ font-size × 1.2
- 未设
ctx.textBaseline，导致不同字体基线差异大；统一设为'middle'或'bottom'更可控 - 中文混排英文时，推荐使用支持中西文均衡的字体，如
"PingFang SC", "Hiragino Sans GB", sans-serif
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
