用Canvas实现带描边又带渐变的艺术字，关键是分别设置strokeStyle和fillStyle为不同渐变对象，并按先描边后填充顺序调用strokeText和fillText，确保坐标一致；同时需预先配置font、textAlign、textBaseline以精准控制排版。
要用Canvas实现带描边又带渐变的艺术字，关键不是“先描边再填色”或“反过来”，而是分别控制 strokeStyle 和 fillStyle，各自独立设置渐变对象，并确保调用顺序和样式设置时机正确。
设置字体与定位参数
艺术字效果的基础是清晰可控的文字排版。需提前设定：
– context.font 指定字体大小、粗细和家族（如 "bold 48px Arial"）；
– context.textAlign 控制水平锚点（"left"、"center" 或 "right"）；
– context.textBaseline 控制垂直对齐（常用 "middle" 或 "alphabetic"），避免 y 坐标理解偏差。
为描边和填充分别创建渐变
描边与填充可使用不同渐变，互不干扰。例如：
- 描边用线性渐变：从左到右过渡，起点橙、终点蓝
- 填充用径向渐变：模拟光晕感，中心亮、边缘暗
代码示例：
const strokeGrad = ctx.createLinearGradient(0, 50, canvas.width, 50); strokeGrad.addColorStop(0, "#FF6B35"); strokeGrad.addColorStop(1, "#2ECC71"); ctx.strokeStyle = strokeGrad; const fillGrad = ctx.createRadialGradient(200, 150, 5, 200, 150, 60); fillGrad.addColorStop(0, "#FFFFFF"); fillGrad.addColorStop(1, "#3498DB"); ctx.fillStyle = fillGrad;
按顺序绘制描边+填充文字
Canvas中文字绘制是即时操作，样式必须在调用前设置好。推荐顺序：
- 先设
strokeStyle+lineWidth（如ctx.lineWidth = 3） - 再调用
strokeText(text, x, y) - 接着设
fillStyle - 最后调用
fillText(text, x, y)
注意：两个方法的 (x, y) 应完全一致，否则描边与填充会错位。若需更精细控制，可用 measureText() 获取宽度后手动居中。
增强艺术感的小技巧
真正出彩的艺术字常靠细节叠加：
- 加阴影：
ctx.shadowColor、shadowBlur、shadowOffsetX/Y可营造浮雕或发光感 - 微调描边宽度：过粗易糊，建议 2–4 像素；配合
miterLimit避免尖角断裂 - 动态渐变偏移：在动画循环中修改
createLinearGradient(x0, y0, x1, y1)的坐标，让渐变“流动”起来 - 混合模式（高级）：
ctx.globalCompositeOperation = "overlay"可让多层文字叠加产生丰富色彩反应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
