Canvas中空心文字用strokeText()仅描边，填充文字用fillText()实色填充；两者可组合实现描边+填充效果，需先strokeText后fillText，并设置font、strokeStyle、fillStyle等属性。
Canvas 中绘制空心文字和填充文字的核心区别在于绘图方法不同：填充文字用 fillText()，空心文字（即只有文字轮廓）用 strokeText()。两者可单独使用，也可组合实现“描边+填充”的复合效果。
填充文字：用 fillText() 显示实色字
该方法将文字内部按当前 fillStyle 填满颜色或渐变，不绘制轮廓线。
- 需提前设置
ctx.fillStyle（如"#333"或"red"） - 调用
ctx.fillText("Hello", x, y)，y 是文字基线位置，不是顶部 - 若未设置
fillStyle，默认为黑色；透明色（如"rgba(0,0,0,0)"）会显示为空白
空心文字：用 strokeText() 只画轮廓
该方法仅沿文字路径描边，不填充内部，效果类似镂空或钢笔勾勒。
- 需提前设置
ctx.strokeStyle和ctx.lineWidth（否则默认细线、黑色） - 调用
ctx.strokeText("Hello", x, y) - 注意：
lineWidth影响描边粗细，但过大会导致小字号文字边缘模糊或断开
组合使用：先描边再填充，做出“描边文字”效果
常见设计需求（如白字加黑边）靠 strokeText() 和 fillText() 按顺序调用实现。
- 顺序很重要：先
strokeText再fillText，避免填充覆盖描边 - 示例：让文字有 2px 黑边 + 白色主体
ctx.strokeStyle = "#000"; ctx.lineWidth = 2;<br>ctx.fillStyle = "#fff";<br>ctx.strokeText("Hi", 50, 80);<br>ctx.fillText("Hi", 50, 80); - 若想只显示描边（无填充），确保
fillStyle不影响，或跳过fillText调用
其他影响因素：字体、对齐与抗锯齿
无论填充还是描边，文字渲染还受以下设置影响：
-
ctx.font必须设置（如"bold 24px Arial"），否则不显示 -
ctx.textAlign和ctx.textBaseline控制定位基准，影响x、y解释方式 -
ctx.lineJoin和ctx.lineCap对描边文字的转角和端点形状有细微影响（尤其粗描边时） - 抗锯齿由
ctx.imageSmoothingEnabled控制，但对文字默认开启，一般无需干预
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
