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控制,但对文字默认开启,一般无需干预


















