乐闻世界logo
5月29日 22:54

Canvas fillText 和 strokeText 有什么区别？如何实现高级文本效果？

Canvas fillText 和 strokeText 有什么区别？如何实现高级文本效果？

fillText 绘制实心文字，strokeText 绘制文字轮廓（空心），两者共用 font、textAlign、textBaseline 属性。调用签名：fillText(text, x, y [, maxWidth])，maxWidth 超出时自动压缩。

关键要点：

  • 同时使用：先 strokeText 再 fillText，可做出描边+填充效果，避免填充被描边覆盖
  • measureText：获取文本宽度做布局计算，返回 TextMetrics 对象
  • maxWidth：文本超宽时等比缩放，不截断
  • 多行文本：Canvas 不支持自动换行，需手动按 \n 分割后逐行 fillText
  • 中文渲染：指定支持中文的字体族，否则可能回退为系统默认
javascript
ctx.font = 'bold 24px sans-serif';
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.strokeText('描边文字', 50, 50);
ctx.fillStyle = '#e74c3c';
ctx.fillText('填充文字', 50, 80);

追问

  1. 如何实现文本自动换行？ — 按字符逐个累加 measureText 宽度，超过容器宽度时截断换行
  2. strokeText 描边模糊怎么办？ — 设置 lineJoin 为 round，或在 fillText 之前 strokeText 避免叠加伪影
  3. 如何绘制竖排文字？ — 逐字绘制并递增 y 坐标，或使用 CSS WritingMode 配合 OffscreenCanvas
  4. measureText 能获取高度吗？ — 标准 TextMetrics 已支持 actualBoundingBoxAscent/Descent，兼容性需注意
  5. 高 DPI 屏幕文字模糊如何解决？ — Canvas 尺寸乘 devicePixelRatio，CSS 尺寸不变，scale 后绘制
标签：Canvas