高清屏画布适配需同步处理dpr与窗口尺寸变化：取父容器getboundingclientrect宽高，乘devicepixelratio得缓冲区像素，赋值canvas.width/height；设style.width/height保持1:1显示；resize时原子化重设三要素并scale(dpr,dpr)、清空重绘；加防抖、缓存dpr变化、save/restore上下文；用resizeobserver替代resize；移动端加viewport锁定。
高清屏画布适配必须同时应对两件事：设备像素比（DPR）和窗口尺寸变化。只处理 resize 不管 DPR，Canvas 会模糊；只设 DPR 不监听窗口，画布又无法撑满屏幕。关键在于每次尺寸变动时，同步更新 canvas 的缓冲区像素、CSS 显示尺寸和绘图上下文缩放。
用 getBoundingClientRect + devicePixelRatio 算真实渲染尺寸
不要用 window.innerWidth/Height 直接赋值给 canvas.width/height——它没考虑缩放和 DPR。正确做法是：
- 取 canvas 父容器的 getBoundingClientRect()，拿到当前 CSS 像素宽高（比如 800×600）
- 乘以 window.devicePixelRatio（如 2 或 3），得到物理像素级缓冲区大小（1600×1200）
- 把结果赋给 canvas.width 和 canvas.height
- 再把容器宽高设为 canvas.style.width/style.height（单位 px），保持 CSS 显示比例为 1:1
resize 事件里重置三要素并重绘
监听 window.resize 后，不能只改 style 或只改 width/height。必须原子化执行：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 重设 canvas.width 和 canvas.height（清空缓冲区）
- 重设 canvas.style.width 和 canvas.style.height（控制显示区域）
- 调用 ctx.scale(dpr, dpr)（让绘制坐标与 CSS 像素对齐）
- 立即 ctx.clearRect(0, 0, canvas.width, canvas.height)，再重绘内容
防抖 + 缓存避免高频重绘和抖动
用户拖拽窗口边缘或快速缩放时，resize 会高频触发。直接响应会导致卡顿或错帧：
- 加 setTimeout 防抖，延迟 100ms 执行重设逻辑
- 缓存上一次有效的 dpr × zoom 值，仅当变化超过 ±0.02 才真正更新
- 重设前 ctx.save()，重设后 ctx.restore()，防止 scale 状态污染后续绘制
- 如果父容器不是 body，优先监听其 ResizeObserver，比 window.resize 更精准
移动端要加 viewport 锁定
否则 iOS Safari 或微信 WebView 可能双击缩放，导致 getBoundingClientRect 返回失真尺寸：
- 在 head 中加：
- 安卓部分环境需额外加 shrink-to-fit=no
- 避免用固定 width（如 width=750），一律用 width=device-width
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
