Canvas绘图模糊的根本原因是设备像素比（dpr）与canvas的CSS显示尺寸、实际绘制尺寸三者未对齐，导致浏览器强制缩放插值。具体表现为：canvas.width/height定义物理像素数，style.width/height定义CSS逻辑尺寸，当二者比例不等于window.devicePixelRatio时，即发生拉伸模糊。
canvas绘图模糊的根本原因是什么
Canvas 模糊不是“画得不好”，而是设备像素比（window.devicePixelRatio）和 canvas 的 CSS 显示尺寸、实际绘制尺寸三者没对齐。浏览器默认把 <canvas width="300" height="300"></canvas> 当作 300×300 像素画布，但高 DPI 屏幕（如 MacBook Retina、安卓旗舰机）会用 2 倍甚至 3 倍物理像素去渲染这 1 个 CSS 像素——结果就是浏览器自动拉伸模糊。
关键点：
-
canvas.width/canvas.height是位图分辨率（即实际绘制的像素数） -
canvas.style.width/canvas.style.height是CSS 占据尺寸（即显示大小） - 两者比例不等于
window.devicePixelRatio，就会模糊或失真
如何让 canvas 在高清屏下保持锐利
核心操作是：手动将 canvas 的位图尺寸放大 devicePixelRatio 倍，并用 CSS 缩回原显示尺寸。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
<p>// 1. 保存原始 CSS 尺寸
const rect = canvas.getBoundingClientRect();
const width = rect.width;
const height = rect.height;</p><p>// 2. 设置 canvas 实际像素尺寸（乘以 dpr）
canvas.width = Math.round(width <em> dpr);
canvas.height = Math.round(height </em> dpr);</p><p>// 3. 缩放绘图上下文，确保坐标系不变
ctx.scale(dpr, dpr);</p><p>// 4. 此时 drawRect(0,0,100,100) 仍画在“逻辑 100px”位置，但用了 200 物理像素
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);</p>注意：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须在
ctx.scale()后再绘制，否则图形会被 double 绘制（变粗、错位） -
Math.round()防止 canvas 宽高为小数（部分浏览器会截断导致边缘丢像素） - 如果 canvas 是响应式（比如全屏或 flex 布局），每次 resize 后都需重新计算并重设
width/height和scale
resize 时忘记重置 canvas 分辨率会怎样
常见错误现象：
- 页面缩放后，canvas 突然变模糊（尤其 Chrome DevTools 切换设备模拟时）
- 移动端横竖屏切换后线条发虚、文字锯齿明显
- 使用
canvas.toDataURL()导出图片，发现导出的是低清版本（因为未更新width/height）
正确做法：
- 监听
window.onresize或使用ResizeObserver - 不要只改
style.width，必须同步更新canvas.width和canvas.height - 每次重设尺寸后，必须重新调用
ctx.scale(dpr, dpr)（否则缩放状态残留，叠加导致变形） - 若用了
ctx.save()/ctx.restore()，注意 scale 是状态的一部分，restore 后不会自动复原到新尺寸所需的缩放
drawImage 渲染图片模糊怎么修
即使 canvas 本身高清了，用 ctx.drawImage(img, x, y) 贴图仍可能模糊，原因有两个：
- 图片本身分辨率不足（比如用 100×100 的 PNG 去铺满 200×200 的高清 canvas 区域）
- 浏览器默认启用图像平滑抗锯齿（
imageSmoothingEnabled = true），在非整数缩放时插值模糊
解决方案：
- 优先提供 2x/3x 分辨率的图片资源（例如
@2x后缀），按dpr动态加载 - 关闭插值（仅适用于 UI 图标、像素画等不需要抗锯齿的场景）：
ctx.imageSmoothingEnabled = false; ctx.imageSmoothingQuality = 'high'; // 可选，部分浏览器支持
- 若绘制的是 CanvasPattern（
createPattern），也要确保 pattern 来源 canvas 本身已按 dpr 渲染
真正容易被忽略的一点：devicePixelRatio 在页面生命周期中可能变化（比如 macOS 用户手动调节显示器缩放比例，或 Windows 用户切换高对比度模式）。不能只在初始化时读一次，关键绘制前最好重新检查是否变化。
