优化HTML5 Canvas在高分辨率屏幕上的显示：解决模糊与坐标偏移问题

interface Dimensions {
  width: number;
  height: number;
}

const scaleCanvas = (
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  targetDimensions: Dimensions // 传入Canvas的逻辑（CSS）尺寸
): void => {
  const { devicePixelRatio } = window;

  // 1. 设置Canvas的物理像素尺寸
  // 这是为了在高DPI屏幕上提供足够的像素密度，防止模糊
  canvas.width = targetDimensions.width * devicePixelRatio;
  canvas.height = targetDimensions.height * devicePixelRatio;

  // 2. 通过CSS设置Canvas的显示尺寸
  // 这确保Canvas在页面上占据的视觉空间是期望的逻辑（CSS）尺寸
  canvas.style.width = `${targetDimensions.width}px`;
  canvas.style.height = `${targetDimensions.height}px`;

  // 3. 缩放绘图上下文
  // 关键一步：让后续所有绘图操作的坐标系统回归到逻辑（CSS）像素
  ctx.scale(devicePixelRatio, devicePixelRatio);
};

interface Rect {
  width: number;
  height: number;
}

interface Coords {
  startX: number;
  startY: number;
  endX: number;
  endY: number;
}

const calculateCenterRectCoords = (
  rect: Rect,
  canvasLogicalWidth: number, // Canvas的逻辑（CSS）宽度
  canvasLogicalHeight: number  // Canvas的逻辑（CSS）高度
): Coords => {
  const { width, height } = rect;

  // 所有的计算都基于Canvas的逻辑（CSS）尺寸
  const startX = canvasLogicalWidth / 2 - width / 2;
  const startY = canvasLogicalHeight / 2 - height / 2;

  return {
    startX,
    startY,
    endX: startX + width,
    endY: startY + height,
  };
};

import React, { useRef, useEffect, useState, useCallback } from 'react';
import style from './CanvasComponent.module.css'; // 假设你的CSS模块

interface RectData {
  width: number;
  height: number;
}

const CanvasComponent: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasParentRef = useRef<HTMLDivElement>(null);
  const [rectToDraw] = useState<RectData>({ width: 100, height: 50 }); // 示例矩形数据

  // 用于存储Canvas的逻辑（CSS）尺寸
  const [canvasLogicalDimensions, setCanvasLogicalDimensions] = useState({
    width: 0,
    height: 0,
  });

  // Canvas缩放函数
  const scaleCanvas = useCallback(
    (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, dimensions: Dimensions): void => {
      const { devicePixelRatio } = window;
      canvas.width = dimensions.width * devicePixelRatio;
      canvas.height = dimensions.height * devicePixelRatio;
      ctx.scale(devicePixelRatio, devicePixelRatio);
      canvas.style.width = `${dimensions.width}px`;
      canvas.style.height = `${dimensions.height}px`;
    },
    []
  );

  // 计算中心矩形坐标的函数
  const calculateCenterRectCoords = useCallback(
    (rect: RectData, logicalWidth: number, logicalHeight: number) => {
      const { width, height } = rect;
      const startX = logicalWidth / 2 - width / 2;
      const startY = logicalHeight / 2 - height / 2;
      return {
        startX,
        startY,
        endX: startX + width,
        endY: startY + height,
      };
    },
    []
  );

  // 绘制函数
  const drawRectangles = useCallback(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext('2d');
    if (!canvas || !ctx || canvasLogicalDimensions.width === 0) return;

    // 清除之前的绘制
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 注意这里是物理尺寸

    // 计算中心矩形的位置，使用逻辑尺寸
    const { startX, startY, width, height } = calculateCenterRectCoords(
      rectToDraw,
      canvasLogicalDimensions.width,
      canvasLogicalDimensions.height
    );

    // 绘制中心矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(startX, startY, width, height);

    // 可以在此基础上绘制其他矩形
    // 例如：在中心矩形右侧绘制一个小的红色矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(startX + width + 10, startY, 20, 20);

  }, [rectToDraw, calculateCenterRectCoords, canvasLogicalDimensions]);

  useEffect(() => {
    const canvas = canvasRef.current;
    const canvasParent = canvasParentRef.current;
    if (!canvas || !canvasParent) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 获取父容器的实际渲染尺寸作为Canvas的逻辑尺寸
    const dimensions = canvasParent.getBoundingClientRect();
    setCanvasLogicalDimensions({
      width: dimensions.width,
      height: dimensions.height,
    });

    // 执行Canvas缩放
    scaleCanvas(canvas, ctx, {
      width: dimensions.width,
      height: dimensions.height,
    });

    // 监听父容器尺寸变化，重新缩放和绘制
    const resizeObserver = new ResizeObserver((entries) => {
      for (let entry of entries) {
        if (entry.target === canvasParent) {
          const newDimensions = entry.contentRect;
          setCanvasLogicalDimensions({
            width: newDimensions.width,
            height: newDimensions.height,
          });
          // 重新缩放Canvas
          scaleCanvas(canvas, ctx, {
            width: newDimensions.width,
            height: newDimensions.height,
          });
          // 重新绘制所有内容
          drawRectangles();
        }
      }
    });

    resizeObserver.observe(canvasParent);

    // 初始绘制
    drawRectangles();

    return () => {
      resizeObserver.disconnect();
    };
  }, [scaleCanvas, drawRectangles]); // 依赖项包含需要重新执行effect的函数

  return (
    <div ref={canvasParentRef} className={style.canvasContainer}>
      <canvas
        ref={canvasRef}
        // 初始width/height可以不设置，或者设置为1，因为会在useEffect中被覆盖
        // 或者直接设置成父容器的offsetWidth/Height，但最终会被getBoundingClientRect覆盖
        // 关键是style.width/height由JS控制
        className={style.canvas}
      />
    </div>
  );
};

export default CanvasComponent;

/* CanvasComponent.module.css */
.canvasContainer {
  width: 100%; /* 示例：父容器占满宽度 */
  height: 400px; /* 示例：父容器固定高度 */
  border: 1px solid gray;
  display: flex; /* 确保Canvas可以填充父容器 */
  justify-content: center;
  align-items: center;
}

.canvas {
  display: block; /* 移除Canvas底部默认空白 */
  /* 不要在这里设置width/height，让JS控制 */
}