Canvas模糊本质是CSS像素与物理像素不匹配，需用devicePixelRatio动态设置width/height为物理像素、CSS控制逻辑尺寸，并调用ctx.scale(dpr,dpr)缩放绘图上下文。
高清屏（Retina）下 Canvas 画布模糊，本质是 CSS 像素与设备物理像素不匹配导致的。解决核心就一条：让 Canvas 的 width 和 height 属性值等于其实际渲染所需的物理像素数，同时用 CSS 控制显示尺寸（即逻辑像素），并配合 window.devicePixelRatio 动态计算缩放比。
获取并应用正确的设备像素比
不是所有设备都支持 window.devicePixelRatio，需做兼容判断；部分安卓浏览器返回值可能非整数（如 1.25、1.75），但 Canvas 只接受整数宽高，建议四舍五入或向下取整（更稳妥）。
- 用
const dpr = window.devicePixelRatio || 1;获取基础比例 - 若需兼容旧环境（如 IE），可 fallback 到 1
- 注意：CSS 设置的
width/height是逻辑尺寸，Canvas 的width/height属性必须是物理像素数
动态设置 Canvas 的渲染分辨率
Canvas 元素的 width 和 height 属性决定其内部绘图缓冲区大小，这个值必须乘以 DPR；而 CSS 的 style.width 和 style.height 控制它在页面中占用的布局空间（逻辑像素）。
- 假设容器宽 300px、高 200px，则 Canvas 的
width = 300 * dpr，height = 200 * dpr - 再通过
canvas.style.width = '300px'和canvas.style.height = '200px'缩放显示 - 务必在设置宽高后，用
ctx.scale(dpr, dpr)对绘图上下文做缩放，否则图形会变小
响应式重绘与缩放同步处理
窗口缩放、横竖屏切换、DPR 变化（如 macOS 插拔外接显示器）都会影响渲染质量，需监听关键事件并重新适配。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
resize：更新容器尺寸，重设 Canvas 宽高和 ctx 缩放 - 监听
orientationchange（移动端）：触发重适配 - 高级方案可监听
matchMedia('(resolution)')或轮询devicePixelRatio变化（iOS Safari 不触发 resize） - 重绘前清空画布：
ctx.setTransform(1, 0, 0, 1, 0, 0)重置变换，再ctx.clearRect(0, 0, canvas.width, canvas.height)
封装一个轻量可复用的适配函数
以下是一个无依赖、开箱即用的适配工具函数，支持传入 Canvas 元素和目标容器（或直接传宽高）：
function setupHiDPICanvas(canvas, container = canvas, width = null, height = null) {
const dpr = window.devicePixelRatio || 1;
const rect = container.getBoundingClientRect();
const w = width ?? rect.width;
const h = height ?? rect.height;
<p>canvas.width = Math.round(w <em> dpr);
canvas.height = Math.round(h </em> dpr);
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';</p><p>const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
return { ctx, dpr };
}</p><p>// 使用示例：
// const canvas = document.getElementById('myCanvas');
// const { ctx } = setupHiDPICanvas(canvas);
// ctx.fillRect(10, 10, 100, 100); // 坐标和尺寸按逻辑像素写即可
</p>这套方案不依赖框架，适配 PC/移动/平板全场景，且保持绘图逻辑不变（你仍按 CSS 像素坐标开发），真正做到了“一次编写，多屏清晰”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
