手机Canvas图表锯齿主因是逻辑像素与物理像素未对齐，需三步解决：按devicePixelRatio设canvas实际宽高并CSS固定显示尺寸；用ctx.scale(dpr,dpr)缩放绘图上下文；线条绘制时坐标四舍五入加0.5对齐像素中心。
手机高清屏下 Canvas 图表出现锯齿，核心不是“画得不够细”，而是逻辑像素和物理像素没对齐，加上坐标漂移、插值失真共同导致的亚像素渲染问题。解决关键在三步：设对分辨率、缩放坐标系、对齐绘制点。
按设备像素比重设 canvas 实际尺寸
手机高清屏（如 iPhone、部分安卓旗舰）的 window.devicePixelRatio 通常是 2 或 3。仅靠 CSS 缩放或固定 width/height 属性，会让 canvas 内部只有 1×1 的物理像素承载本该更精细的图形，必然发虚、毛边。
- 先获取真实显示区域尺寸：
const rect = canvas.getBoundingClientRect(); - 再按 DPR 设置 canvas 的内在分辨率：
canvas.width = Math.floor(rect.width * dpr); canvas.height = Math.floor(rect.height * dpr); - 用 CSS 固定其对外显示尺寸：
canvas.style.width = rect.width + 'px'; canvas.style.height = rect.height + 'px';
缩放绘图上下文，保持逻辑坐标不变
改了 canvas 像素尺寸后，如果不调整绘图环境，所有坐标会直接放大——你画一个 100×100 的矩形，会撑满整个画布。所以必须同步缩放 2D 上下文：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr);- 此后所有绘图操作（
lineTo、fillRect、arc）仍用原始逻辑尺寸书写，比如ctx.fillRect(10, 10, 80, 60)，系统自动映射到高分物理像素 - 避免手动乘以 dpr 计算坐标，容易出错且难以维护
强制整数坐标对齐像素中心
锯齿最常见于 1px 线条、刻度线、坐标轴边缘——只要起始点落在 .3、.7 这类非整数位置，浏览器就会混合周围像素颜色。图表尤其敏感，因为网格线、折线段多为细线。
立即学习“前端免费学习笔记（深入）”；
- 对线条、矩形边框等，把坐标四舍五入到
Math.round(x) + 0.5，确保落在像素中心（例如：ctx.moveTo(Math.round(x) + 0.5, Math.round(y) + 0.5)） - 禁用不必要的 transform（如
ctx.translate(0.3, 0.3)），防止误差累积；若必须平移，也做同样取整处理 - 文字可加
ctx.textAlign = 'center'; ctx.textBaseline = 'middle';，再配合整数定位，避免字体模糊
按需控制图像缩放质量
如果图表中含图片（如图标、背景纹理），drawImage 时默认双线性插值在非整数缩放下易糊。尤其移动端常有 1.5×、1.33× 等比例。
- 启用高质量插值：
ctx.imageSmoothingQuality = 'high';（Chrome/Firefox/Edge 支持） - 对大幅缩放（如原图 1024px → 目标 128px），采用“降步缩放”：用离屏 canvas 分两到三步缩放（1024→512→256→128），每步都用整数比例，逼近双三次效果
- 若图表本身是矢量风格（如 SVG 转绘），优先用路径重绘，而非 drawImage 位图
