Canvas在Retina屏模糊的根本原因是未按devicePixelRatio缩放绘图分辨率。需将width/height设为CSS尺寸×dpr，用CSS控制显示大小，并调用ctx.scale(dpr,dpr)保持逻辑像素坐标。
Canvas在Retina屏上显示模糊，根本原因是默认以CSS像素为单位绘制，而高DPR（Device Pixel Ratio）设备的物理像素密度更高，导致Canvas的width/height属性值未按设备像素比缩放，画布被浏览器自动拉伸渲染。
正确设置Canvas的物理尺寸与CSS尺寸
关键在于分离“绘图分辨率”（canvas元素的width和height属性）与“显示尺寸”（CSS中的width和height样式）。需根据window.devicePixelRatio放大绘图分辨率，并用CSS将其缩回视觉所需大小。
- 获取当前设备像素比：
const dpr = window.devicePixelRatio || 1; - 设置Canvas的
width/height属性为：期望CSS宽高 × dpr（取整） - 用CSS设置Canvas显示尺寸（如
style="width: 300px; height: 200px;"），确保其不随缩放失真 - 绘制前调用
ctx.scale(dpr, dpr)，使所有绘图坐标逻辑保持CSS像素单位，避免手动换算
动态适配屏幕缩放与窗口变化
用户缩放页面或切换设备（如插拔外接Retina显示器）时，devicePixelRatio可能变化，Canvas需重新初始化。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 监听
resize事件，但注意：仅窗口大小变化不一定影响DPR；更稳妥的是监听matchMedia对(resolution)或(device-pixel-ratio)的变化 - 推荐方案：
window.matchMedia(`screen and (min-resolution: ${dpr}dppx)`)配合addEventListener('change') - 重设Canvas时，先保存绘图状态（如用
toDataURL()暂存图像），再清空、重设尺寸、重绘
避免常见误区
很多模糊问题其实源于误操作而非Canvas机制本身。
立即学习“前端免费学习笔记（深入）”；
- ❌ 直接修改Canvas的
style.width/style.height却不改width/height属性——这等于强制拉伸位图 - ❌ 在
scale(dpr, dpr)后仍用物理像素坐标绘图（例如画一个1×1矩形却传入fillRect(0,0,2,2)）——应始终按CSS逻辑像素写坐标 - ❌ 忘记对Canvas父容器设置
transform: scale()或使用zoom等全局缩放CSS——这会二次干扰Canvas渲染管线 - ✅ 简单验证方法：绘制1px直线后，用
getImageData检查实际是否占多个物理像素；或截图放大观察边缘是否锐利
兼容性与简化封装建议
低版本Safari或旧Android WebView可能不支持devicePixelRatio，需降级处理。
- 安全兜底：
const dpr = window.devicePixelRatio || 1;，不做假设 - 可封装一个
setupHiDPICanvas(canvas, cssWidth, cssHeight)函数，统一处理尺寸、缩放、清空流程 - 若使用框架（如React/Vue），将Canvas尺寸逻辑抽离为自定义Hook或Composable，避免重复判断
- 对于纯图标或矢量内容，考虑用SVG替代Canvas——天然适配DPR，无需手动缩放
