如何根据设备尺寸调整Canvas滤镜模糊度以保持一致性

问题核心在于：Canvas的filter: blur()参数是基于Canvas实际像素尺寸计算的，而非页面显示的CSS像素。当Canvas实际尺寸和显示尺寸不匹配时，固定px值会导致视觉模糊强度在不同设备上出现差异。

正确的计算逻辑 #

我们需要把期望的**视觉模糊强度（CSS像素）**转换为Canvas实际像素对应的模糊值，步骤如下：

1. 计算Canvas实际像素与显示CSS像素的比例：这个比例代表1个CSS显示像素对应多少个Canvas实际像素。
2. 用目标模糊值乘以该比例，得到适配Canvas实际像素的模糊参数。

修正后的完整代码 #

// this.#blur 为期望的视觉模糊强度（比如7，单位：CSS像素）
const ctx = this.#canvas.getContext("2d");
const draw_2DCanvas = () => {
    // 计算实际像素与显示像素的比例
    const scaleRatio = this.#canvas.width / this.#canvas.clientWidth;
    // 转换为Canvas实际像素对应的模糊值
    const actualBlur = this.#blur * scaleRatio;
    ctx.filter = `blur(${actualBlur}px)`;
    
    ctx.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
    // 绘制时使用Canvas实际尺寸，避免拉伸导致的模糊偏差
    ctx.drawImage(this.#video, width_diff, height_diff, this.#canvas.width, this.#canvas.height);
    
    requestAnimationFrame(draw_2DCanvas);
};
draw_2DCanvas();

额外注意事项 #

• 确保Canvas的width/height属性（实际像素尺寸）固定为原始值（比如你提到的360x270），CSS样式设置为响应式（例如width: 100%; height: auto;），保证显示尺寸自适应但实际像素不变。
• 如果需要适配高DPI屏幕（如Retina屏），可以将Canvas实际尺寸乘以设备像素比，再通过CSS固定显示尺寸，模糊计算逻辑依然有效：

  const dpr = window.devicePixelRatio || 1;
  this.#canvas.width = 360 * dpr;
  this.#canvas.height = 270 * dpr;
  this.#canvas.style.width = '360px';
  this.#canvas.style.height = '270px';
  

内容的提问来源于stack exchange，提问作者The Blind Hawk