解决 HTML5 Canvas 高分辨率模糊与坐标偏移问题

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

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

const CanvasComponent: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasParentRef = useRef<HTMLDivElement>(null); // Canvas的父容器

  // 示例矩形尺寸，这些是逻辑像素尺寸
  const rect: Rect = { width: 100, height: 50 };

  /**
   * 负责 Canvas 的高DPI缩放。
   * 它将 Canvas 的内部绘图尺寸放大 devicePixelRatio 倍，
   * 同时保持其在DOM中的显示尺寸不变，并缩放绘图上下文。
   * @param canvas HTMLCanvasElement 实例
   * @param ctx CanvasRenderingContext2D 实例
   * @param logicalWidth Canvas 的逻辑宽度（CSS 像素）
   * @param logicalHeight Canvas 的逻辑高度（CSS 像素）
   */
  const scaleCanvas = useCallback(
    (
      canvas: HTMLCanvasElement,
      ctx: CanvasRenderingContext2D,
      logicalWidth: number,
      logicalHeight: number
    ): void => {
      const { devicePixelRatio } = window;

      // 1. 设置 Canvas 的 CSS 样式尺寸为逻辑尺寸
      canvas.style.width = `${logicalWidth}px`;
      canvas.style.height = `${logicalHeight}px`;

      // 2. 设置 Canvas 的内部绘图尺寸为逻辑尺寸 * devicePixelRatio
      //    这将提供一个高分辨率的绘图缓冲区
      canvas.width = logicalWidth * devicePixelRatio;
      canvas.height = logicalHeight * devicePixelRatio;

      // 3. 缩放绘图上下文，使后续的绘图指令基于逻辑像素进行
      //    例如，绘制一个100x50的矩形，在缩放后的上下文中，它会占用
      //    内部缓冲区中 100*devicePixelRatio x 50*devicePixelRatio 的物理像素
      ctx.scale(devicePixelRatio, devicePixelRatio);
    },
    []
  );

  /**
   * 计算中心矩形的逻辑坐标。
   * 此函数应始终使用 Canvas 的逻辑尺寸进行计算。
   * @param logicalWidth Canvas 的逻辑宽度（CSS 像素）
   * @param logicalHeight Canvas 的逻辑高度（CSS 像素）
   * @returns 包含矩形起始和结束坐标的对象
   */
  const centerRectCoords = useCallback(
    (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,
      };
    },
    [rect]
  );

  /**
   * 绘制函数，负责在 Canvas 上绘制所有元素。
   * 所有的绘图指令都应基于逻辑像素。
   * @param ctx CanvasRenderingContext2D 实例
   * @param logicalWidth Canvas 的逻辑宽度
   * @param logicalHeight Canvas 的逻辑高度
   */
  const draw = useCallback(
    (ctx: CanvasRenderingContext2D, logicalWidth: number, logicalHeight: number) => {
      // 清空 Canvas
      ctx.clearRect(0, 0, logicalWidth, logicalHeight); // 注意这里是逻辑尺寸

      // 绘制中心矩形
      const { startX, startY, width, height } = { ...centerRectCoords(logicalWidth, logicalHeight), ...rect };
      ctx.fillStyle = 'blue';
      ctx.fillRect(startX, startY, width, height);

      // 可以在这里添加其他基于逻辑像素的绘图
      ctx.fillStyle = 'red';
      ctx.font = '20px Arial'; // 字体大小也是逻辑像素
      ctx.fillText('Hello Canvas!', startX, startY - 10);
    },
    [centerRectCoords, rect]
  );

  useEffect(() => {
    const canvas = canvasRef.current;
    const canvasParent = canvasParentRef.current;

    if (!canvas || !canvasParent) {
      return;
    }

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

    // 获取父容器的实际逻辑尺寸作为 Canvas 的逻辑尺寸
    // getBoundingClientRect() 提供了元素在DOM中的实际布局尺寸
    const dimensions = canvasParent.getBoundingClientRect();
    const logicalWidth = dimensions.width;
    const logicalHeight = dimensions.height;

    // 执行 Canvas 缩放
    scaleCanvas(canvas, ctx, logicalWidth, logicalHeight);

    // 执行绘图
    draw(ctx, logicalWidth, logicalHeight);

    // 可以在这里添加 resize 监听器，以便在父容器尺寸变化时重新绘制
    const handleResize = () => {
      const newDimensions = canvasParent.getBoundingClientRect();
      const newLogicalWidth = newDimensions.width;
      const newLogicalHeight = newDimensions.height;

      // 重新执行缩放和绘图
      scaleCanvas(canvas, ctx, newLogicalWidth, newLogicalHeight);
      draw(ctx, newLogicalWidth, newLogicalHeight);
    };

    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [scaleCanvas, draw]); // 依赖项确保在函数更新时重新执行

  return (
    <div ref={canvasParentRef} className={style.canvasContainer}>
      <canvas ref={canvasRef} className={style.canvas} />
    </div>
  );
};

export default CanvasComponent;

// CanvasComponent.tsx
// ... (如上所示的 React 组件代码)

/* CanvasComponent.module.css */
.canvasContainer {
  width: 100%; /* 确保父容器有明确尺寸 */
  height: 400px; /* 或者其他固定高度，或者使用 flex/grid 布局 */
  border: 1px solid #ccc;
  display: flex; /* 如果需要 Canvas 填充父容器，可以这样设置 */
  justify-content: center;
  align-items: center;
}

.canvas {
  /* Canvas 自身的 style.width/height 会在 JS 中设置，
     这里可以不设置，或者设置一个默认的，但会被JS覆盖 */
  display: block; /* 避免 Canvas 元素下的额外空间 */
  /* 不要在这里设置 width/height，让JS控制 */
}