HTML Canvas动态设置像素尺寸后模糊的原因及自定义响应式坐标系实现咨询

嘿，我目前在开发一个Canvas应用，遇到了两个问题想请教大家：
第一个是想实现类似SVG中viewBox那样的自定义响应式坐标系——我知道Canvas本身是基于像素的，但希望能自定义一个由minX、maxX、minY、maxY四个值组成的坐标系（比如[0, 0, 1000, 1000]），这样不管Canvas的实际显示尺寸怎么变，比如我在(250, 250)位置画一个矩形，它都能稳定显示在屏幕的左上象限里。
第二个问题是：我动态设置Canvas的像素尺寸后，画面会变得模糊，想知道这是什么原因导致的，以及该怎么解决？

一、动态设置Canvas像素尺寸后模糊的原因及解决方法 #

• 模糊核心原因：Canvas有两个关键尺寸，一个是像素尺寸（通过canvas.width/canvas.height设置，决定画布的实际像素数量），另一个是显示尺寸（通过CSS的width/height设置，决定画布在页面上的显示大小）。如果两者比例不匹配，尤其是显示尺寸大于像素尺寸时，浏览器会拉伸插值像素，导致画面模糊；另外高DPI屏幕下，设备像素比（devicePixelRatio）大于1，若未适配这个比例，也会出现模糊。
• 具体解决办法：
  1. 让Canvas的像素尺寸等于显示尺寸乘以设备像素比，同时调整绘图上下文的缩放比例：

     function resizeCanvas() {
         const canvas = document.getElementById('myCanvas');
         const dpr = window.devicePixelRatio || 1;
         // 获取画布在页面上的实际显示尺寸
         const rect = canvas.getBoundingClientRect();
         // 给画布设置适配高DPI的像素尺寸
         canvas.width = rect.width * dpr;
         canvas.height = rect.height * dpr;
         // 调整上下文缩放，避免绘制内容被放大变形
         const ctx = canvas.getContext('2d');
         ctx.scale(dpr, dpr);
     }
     // 页面加载和窗口大小变化时触发调整
     window.addEventListener('load', resizeCanvas);
     window.addEventListener('resize', resizeCanvas);
     

  2. 尽量保持CSS显示尺寸和像素尺寸的比例一致，避免无意义的拉伸。

二、自定义响应式坐标系（类似SVG viewBox）的实现 #

要实现viewBox的效果，核心是通过Canvas上下文的translate、scale方法做坐标系转换，具体步骤如下：

1. 定义你的自定义坐标系参数，比如const viewBox = [0, 0, 1000, 1000];（对应minX、minY、maxX、maxY）
2. 编写坐标系转换函数，每次绘图前调用：

   function applyViewBox(ctx, viewBox, canvasDisplayWidth, canvasDisplayHeight) {
       const [minX, minY, maxX, maxY] = viewBox;
       const vbWidth = maxX - minX;
       const vbHeight = maxY - minY;
       // 计算适配画布的最小缩放比例，保证整个自定义坐标系内容都能显示
       const scaleX = canvasDisplayWidth / vbWidth;
       const scaleY = canvasDisplayHeight / vbHeight;
       const scale = Math.min(scaleX, scaleY);
       // 计算偏移量（这里以居中显示为例，也可以改成左上对齐）
       const offsetX = (canvasDisplayWidth - vbWidth * scale) / 2;
       const offsetY = (canvasDisplayHeight - vbHeight * scale) / 2;
       
       // 重置变换矩阵，避免之前的变换影响
       ctx.setTransform(1, 0, 0, 1, 0, 0);
       // 清空画布
       ctx.clearRect(0, 0, canvasDisplayWidth, canvasDisplayHeight);
       // 应用变换：先平移画布位置，再缩放，最后把原点移到自定义坐标系的起点
       ctx.translate(offsetX, offsetY);
       ctx.scale(scale, scale);
       ctx.translate(-minX, -minY);
   }
   

3. 之后就可以用自定义坐标系的坐标绘图了，比如：

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   const viewBox = [0, 0, 1000, 1000];
   // 先调整画布尺寸适配高DPI
   resizeCanvas();
   // 应用自定义坐标系（传入画布的显示尺寸）
   applyViewBox(ctx, viewBox, canvas.getBoundingClientRect().width, canvas.getBoundingClientRect().height);
   // 用自定义坐标系坐标画矩形，位置(250,250)，宽高200
   ctx.fillRect(250, 250, 200, 200);
   

   这样不管画布怎么缩放，这个矩形都会稳定出现在相对屏幕左上象限的位置，和SVG viewBox的效果一致。

备注：内容来源于stack exchange，提问作者Abb