canvas在高清屏下模糊的根本原因是css像素与设备物理像素不匹配；需按devicepixelratio放大width/height属性、用ctx.scale()适配坐标，并通过css控制显示尺寸三者协同解决。
Canvas在高清屏（如Retina屏）下绘图模糊，根本原因是CSS像素与设备物理像素不匹配。直接调用ctx.scale()本身不能解决模糊问题，必须配合Canvas元素的width/height属性重设、设备像素比（window.devicePixelRatio）校正，以及CSS尺寸控制三者协同处理。
理解模糊根源：CSS像素 vs 设备像素
高清屏的devicePixelRatio（简称dpr）通常为2或3，意味着1个CSS像素对应2×2或3×3个物理像素。而Canvas默认以CSS像素为单位渲染——如果Canvas的width="400"、height="300"，它实际只分配了400×300个物理像素；当浏览器将其拉伸到800×600 CSS像素显示时，图像就被插值放大，导致模糊。
关键不是“要不要缩放”，而是“如何让Canvas画布拥有足够多的物理像素，并正确映射到CSS布局尺寸”。
正确设置Canvas分辨率：按dpr放大画布尺寸
需手动将Canvas的width和height属性设为CSS尺寸 × dpr，再用ctx.scale(dpr, dpr)让所有绘图坐标自动适配：
- 获取当前dpr：
const dpr = window.devicePixelRatio || 1; - 设置CSS显示尺寸（例如400×300）：
canvas.style.width = "400px"; canvas.style.height = "300px"; - 设置Canvas内在分辨率：
canvas.width = 400 * dpr; canvas.height = 300 * dpr; - 应用缩放变换：
ctx.scale(dpr, dpr);
此后，你仍可按400×300的逻辑坐标绘图（比如ctx.fillRect(10, 10, 50, 30)），Canvas会自动绘制到高分辩率缓冲区，再等比缩小显示，边缘锐利无模糊。
避免常见错误操作
以下做法会让模糊问题更严重或无效：
-
仅改CSS宽高，不改
width/height属性：Canvas缓冲区仍是低分，只是被拉伸显示。 -
只设
width/height但不调用scale()：绘图坐标变小（例如想画10px宽矩形，实际只占10/dpr像素），容易错位或过细。 -
在
scale()后又用CSS transform缩放Canvas：双重缩放叠加，破坏像素对齐。 -
忽略dpr动态变化：用户缩放页面或切换显示器时，应监听
resize或devicePixelRatio变化并重置Canvas。
补充：文本与图像的特殊处理
启用scale(dpr, dpr)后，文字和图片也自动按dpr放大。若发现文字发虚，可额外关闭抗锯齿提升清晰度：
ctx.imageSmoothingEnabled = false;<br>ctx.font = "14px sans-serif"; // 字号保持逻辑大小，无需乘dpr<br>ctx.fillText("Hello", 20, 30);
加载图像时，确保图片资源本身是2x/3x规格，或使用drawImage时传入目标尺寸（已含dpr缩放），避免浏览器二次插值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
