Canvas strokeText方法详解，掌握文本描边绘制、描边样式、组合效果等技巧。strokeText方法绘制文本轮廓，创建空心文字效果。
ctx.strokeText(text, x, y, maxWidth)
| 参数 | 说明 |
|---|---|
| text | 要绘制的文本 |
| x | 起始X坐标 |
| y | 起始Y坐标（基线位置） |
| maxWidth | 可选，最大宽度 |
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '40px Arial'
ctx.strokeStyle = '#3498db'
ctx.lineWidth = 2
ctx.strokeText('Hello Canvas', 50, 100)
lineWidth属性控制描边粗细。
同时使用fillText和strokeText创建立体效果。
ctx.font = 'bold 50px Arial'
// 先描边
ctx.strokeStyle = '#2c3e50'
ctx.lineWidth = 4
ctx.strokeText('立体文字', 50, 100)
// 后填充
ctx.fillStyle = '#3498db'
ctx.fillText('立体文字', 50, 100)
lineCap和lineJoin影响描边文本的角落样式。
结合setLineDash创建虚线文字效果。
绘制顺序
先描边后填充，描边会被填充覆盖一部分。
性能考虑
描边文本比填充文本消耗更多性能。
清晰度
较细的描边在高DPI屏幕上可能不清晰，建议使用偶数宽度。