Canvas生成成就图模糊是因未适配devicePixelRatio，需缩放canvas宽高并调用ctx.scale()；文字偏移需等待字体加载；分享须用服务端生成HTTPS短链而非data URL。
Canvas 画布生成成就图容易糊？先关掉 devicePixelRatio 放大
HTML 里用 canvas 生成成就图片，本地看着清晰，发到微信或钉钉里一打开就模糊——八成是没处理设备像素比。浏览器默认用 window.devicePixelRatio 放大 canvas 渲染，但导出 toDataURL() 或 toBlob() 时，它只按 CSS 像素导出，没把实际绘制的高分屏像素算进去。
- 先读取
devicePixelRatio，然后手动缩放 canvas 的width和height属性（不是 style） - 再用
ctx.scale(dpr, dpr)让绘图逻辑保持不变 - 导出前务必确认 canvas 的
width/height是整数，否则 Safari 可能截断或报错SecurityError: The operation is insecure - 微信内置浏览器对
toBlob()支持不稳定，优先用toDataURL('image/png')，再转成Blob或直接塞进<img>src
文字渲染在 canvas 上偏移、截断？font 加载必须等 onload
用 ctx.font = 'bold 24px "PingFang SC", sans-serif' 直接画中文，常出现字体重叠、y 坐标飘移、最后一行被切掉——字体还没加载完，canvas 就按系统默认字体占位渲染了。
- 不要依赖 CSS 中定义的
@font-face自动加载；用document.fonts.load()显式等待 - 注意：
document.fonts.load()返回 Promise，但部分安卓 WebView 不支持，降级方案是预加载一个隐藏<span>并监听offsetWidth变化 - 测量文字宽度别用
ctx.measureText().width—— 它不考虑实际加载字体的字形差异，真要精确布局，得等字体加载完再测 - 多行文本手写换行逻辑时，
ctx.textBaseline = 'middle'比'top'更可控，避免 y 偏移随字号剧烈变化
生成的图片链接怎么直接分享？别用 data URL 塞到 href
很多人把 canvas.toDataURL() 结果直接赋给 a.href，点开全是乱码或白屏——data URL 过长（尤其带中文字体和阴影），iOS 微信、QQ、部分安卓浏览器会截断或拒绝解析。
- 真正能稳定分享的是短链：必须走服务端。前端传 canvas 数据（base64 或 FormData），后端用
sharp/Pillow解码保存，返回 HTTPS 图片地址 - 如果只是临时调试，可用
URL.createObjectURL(blob)创建临时链接，但仅限当前页面生命周期，关页即失效，不能用于跨应用分享 - 微信 JS-SDK 分享接口要求
imageUrl必须是 HTTPS、域名已配置安全域名、图片尺寸 ≥ 200×200px，且不能是 data URL - 别漏掉 MIME type：
canvas.toDataURL('image/jpeg', 0.9)比 PNG 小 40%，加载更快，但透明背景会变黑
用户截屏分享图带 UI 元素？用 pointer-events 隔离可交互层
有人图省事，直接对整个成就页 html2canvas 截图，结果按钮、输入框、加载动画全拍进去了——这不是成就图，是快照。
立即学习“前端免费学习笔记（深入）”；
- 成就图应只含静态内容：头像、昵称、等级、徽章 SVG、完成时间。所有可交互元素（
<button>,<input>,<div class="loading">）加pointer-events: none+visibility: hidden（不是display: none，否则 html2canvas 会跳过） - 若用纯 canvas 绘制，就别混搭 DOM 渲染。DOM 元素位置受滚动、缩放、iframe 影响，
getBoundingClientRect()算出来的坐标在不同环境偏差极大 - SVG 徽章别用
<img src="icon.svg">引入，而是内联<svg>...</svg>，否则 canvas 无法跨域绘制（即使同源，某些浏览器也拦截）
