Canvas文本在旧浏览器不显示的主因是fillText调用时上下文状态错误：未设font/fillStyle、canvas尺寸为0；IE11不支持textBaseline='middle'及复杂字体语法；Safari需适配devicePixelRatio并手动缩放；所有浏览器均不支持\n换行，须JS手动拆行。
Canvas 文本渲染在旧版浏览器里不显示？先看 fillText 是否被调用成功
很多情况下，文本“消失”不是因为 canvas 不支持，而是 fillText 执行时上下文状态不对。比如没设置 font、fillStyle，或者 canvas 尺寸为 0。IE11 和 Safari 10 以前的版本尤其容易卡在这一步。
-
fillText必须在ctx.font有合法值后调用，空字符串或未设字体时 Safari 会静默失败 - IE11 不支持
ctx.textBaseline = 'middle'的某些组合，建议固定用'alphabetic'或'top' - 如果 canvas 是动态创建的，确保
width/height是数值而非 CSS 属性（canvas.style.width不影响绘图区域）
Chrome/Firefox 正常但 Safari 文本模糊？检查 devicePixelRatio 缩放是否未适配
Safari 对高 DPI 屏幕的 canvas 渲染更敏感，没做像素比补偿时，文字会被拉伸模糊，甚至因亚像素对齐问题完全不可读。
- 必须用
canvas.width和canvas.height手动设为实际宽高 × window.devicePixelRatio - 同时用 CSS 把 canvas 样式宽高设回原始尺寸（如
style="width:300px;height:200px"） - 调用
ctx.scale(ratio, ratio)后再画文本，否则fillText坐标会错位 - 注意：Safari 15.4+ 支持
getContext('2d', { alpha: false })提升文本清晰度，但 iOS 15.0–15.3 有 bug，慎用
IE11 下 strokeText 完全不生效？别用现代字体语法
IE11 的 canvas 2D 上下文对字体解析非常保守，任何带引号、空格或变量插值的 font 字符串都可能被忽略，导致 strokeText 和 fillText 都无输出。
- 只用最简格式：
ctx.font = '14px Arial'，避免'14px "Helvetica Neue", sans-serif' - 不要用
ctx.font = `${size}px ${family}`拼接，IE11 对模板字符串里的 font 解析不稳定 - 如果必须用中文字体，优先选
'Microsoft YaHei'或'SimSun'，'PingFang SC'在 IE11 里无效 - IE11 不支持
ctx.measureText().actualBoundingBoxAscent，需降级用width粗略估算
Canvas 文本换行失效？别依赖 \n，手动拆行才是通用解法
所有浏览器都不原生支持 fillText 中的 \n 换行——这不是 bug，是 canvas 2D 规范明确不处理的。所谓“换行”都是 JS 自己切分字符串 + 循环绘制。
立即学习“前端免费学习笔记（深入）”；
- 用
ctx.measureText(line).width判断单行是否超宽，再按空格/字符切分（注意中文不能按字节切） - 避免用
word-break: break-all类思路直接截断，会破坏语义和可读性 - 移动端 Safari 对长段落
measureText性能较差，建议缓存每行宽度计算结果 - 如果需要富文本效果（如部分加粗），canvas 本身做不到，得切多个 canvas 或改用 SVG
真正麻烦的从来不是“能不能画出来”，而是不同浏览器对同一段 font 字符串、同一组 devicePixelRatio 补偿逻辑、甚至同一个 textBaseline 值的解释差异。这些细节不会报错，只会让文本偏移几像素、模糊一点、或者干脆不出现——得靠真机反复试，截图比对，而不是只信 devtools 里的 canvas 预览。
