如何在HTML5 Canvas上实现高DPI缩放并保持图像清晰与元素居中

const scaleCanvas = (
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  canvasParent: HTMLElement | null
): void => {
  if (!canvasParent) {
    console.warn("Canvas parent element is not available.");
    return;
  }

  const { devicePixelRatio } = window;
  // 获取Canvas父元素的视觉尺寸，这是我们希望Canvas显示的实际大小
  const dimensions = canvasParent.getBoundingClientRect();

  // 1. 设置Canvas的内部绘图尺寸：乘以devicePixelRatio以匹配物理像素
  canvas.width = dimensions.width * devicePixelRatio;
  canvas.height = dimensions.height * devicePixelRatio;

  // 2. 缩放绘图上下文：
  //    所有后续的绘图操作（如fillRect, arc, strokeRect等）
  //    将自动以devicePixelRatio为因子进行缩放，
  //    这样我们就可以继续使用基于CSS像素的逻辑坐标。
  ctx.scale(devicePixelRatio, devicePixelRatio);

  // 3. 设置Canvas的CSS尺寸：保持其在页面上的视觉大小不变
  canvas.style.width = `${dimensions.width}px`;
  canvas.style.height = `${dimensions.height}px`;
};

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

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

const calculateCenterRectCoords = (
  rect: RectDimensions,
  canvasVisualDimensions: CanvasVisualDimensions // 传入Canvas的视觉尺寸
) => {
  const { width, height } = rect;
  const { width: canvasVisualWidth, height: canvasVisualHeight } = canvasVisualDimensions;

  // 所有计算都基于Canvas的视觉尺寸
  const startX = canvasVisualWidth / 2 - width / 2;
  const startY = canvasVisualHeight / 2 - height / 2;

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

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

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

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

const CanvasComponent: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasParentRef = useRef<HTMLDivElement>(null);

  // 假设我们有一个要绘制的矩形尺寸
  const rect = { width: 100, height: 50 };

  // Canvas缩放函数
  const scaleCanvas = useCallback(
    (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): CanvasVisualDimensions | undefined => {
      const canvasParent = canvasParentRef.current;
      if (!canvasParent) return;

      const { devicePixelRatio } = window;
      const dimensions = canvasParent.getBoundingClientRect();

      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`;

      return { width: dimensions.width, height: dimensions.height }; // 返回视觉尺寸
    },
    []
  );

  // 计算中心矩形坐标的函数
  const calculateCenterRectCoords = useCallback(
    (rect: RectDimensions, canvasVisualDimensions: CanvasVisualDimensions) => {
      const { width, height } = rect;
      const { width: canvasVisualWidth, height: canvasVisualHeight } = canvasVisualDimensions;

      const startX = canvasVisualWidth / 2 - width / 2;
      const startY = canvasVisualHeight / 2 - height / 2;

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

  // 绘制函数
  const drawRectangles = useCallback(
    (ctx: CanvasRenderingContext2D, canvasVisualDimensions: CanvasVisualDimensions) => {
      ctx.clearRect(0, 0, canvasVisualDimensions.width, canvasVisualDimensions.height); // 清除整个视觉区域
      ctx.fillStyle = 'blue';

      const centerRect = calculateCenterRectCoords(rect, canvasVisualDimensions);
      ctx.fillRect(centerRect.startX, centerRect.startY, rect.width, rect.height);

      // 绘制其他基于中心矩形的矩形（示例）
      ctx.fillStyle = 'red';
      ctx.fillRect(centerRect.startX - 50, centerRect.startY - 50, 40, 40);
      ctx.fillRect(centerRect.endX + 10, centerRect.endY + 10, 30, 30);
    },
    [rect, calculateCenterRectCoords]
  );

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

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

    // 1. 缩放Canvas并获取其视觉尺寸
    const visualDimensions = scaleCanvas(canvas, ctx);
    if (!visualDimensions) return;

    // 2. 使用视觉尺寸进行绘图
    drawRectangles(ctx, visualDimensions);

    // 考虑响应式：当父元素大小变化时重新缩放和绘制
    const resizeObserver = new ResizeObserver(() => {
        const updatedVisualDimensions = scaleCanvas(canvas, ctx);
        if (updatedVisualDimensions) {
            drawRectangles(ctx, updatedVisualDimensions);
        }
    });

    resizeObserver.observe(canvasParent);

    return () => {
        resizeObserver.disconnect();
    };
  }, [scaleCanvas, drawRectangles]);

  return (
    <div ref={canvasParentRef} style={{ width: '100%', height: '400px', border: '1px solid gray' }}>
      <canvas ref={canvasRef} />
    </div>
  );
};

export default CanvasComponent;