HTML5 Canvas 高DPI适配与清晰渲染指南：解决模糊与坐标偏移问题

/**
 * 对HTML5 Canvas进行高DPI（Retina）适配
 * @param canvas 要适配的HTMLCanvasElement
 * @param ctx Canvas的2D渲染上下文
 * @param parentElement Canvas的父元素，用于获取其CSS尺寸
 */
const scaleCanvasForHighDPI = (
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  parentElement: HTMLElement
): void => {
  if (!parentElement) {
    console.warn("Canvas父元素不存在，无法进行高DPI适配。");
    return;
  }

  // 获取设备的像素比
  const { devicePixelRatio } = window;
  // 获取父元素的实际CSS尺寸，这是Canvas的逻辑尺寸
  const dimensions = parentElement.getBoundingClientRect();

  // 1. 设置Canvas元素的内部分辨率 (物理像素)
  // 这会清除Canvas内容，因此需要在每次调整后重新绘制
  canvas.width = dimensions.width * devicePixelRatio;
  canvas.height = dimensions.height * devicePixelRatio;

  // 2. 调整Canvas的CSS尺寸 (逻辑像素)
  // 确保Canvas在页面上占据的空间不变
  canvas.style.width = `${dimensions.width}px`;
  canvas.style.height = `${dimensions.height}px`;

  // 3. 调整绘图上下文的坐标系
  // 使得后续的绘图操作可以继续使用逻辑像素坐标
  ctx.scale(devicePixelRatio, devicePixelRatio);
};

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

const CanvasComponent = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const canvasParentRef = useRef<HTMLDivElement>(null);
  const ctxRef = useRef<CanvasRenderingContext2D | null>(null);

  // 高DPI适配函数
  const scaleCanvasForHighDPI = useCallback(() => {
    const canvas = canvasRef.current;
    const parentElement = canvasParentRef.current;
    if (!canvas || !parentElement) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    ctxRef.current = ctx; // 保存上下文引用

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

    canvas.width = dimensions.width * devicePixelRatio;
    canvas.height = dimensions.height * devicePixelRatio;

    canvas.style.width = `${dimensions.width}px`;
    canvas.style.height = `${dimensions.height}px`;

    // 在进行新的缩放前，重置上下文的变换矩阵，避免重复缩放
    ctx.setTransform(1, 0, 0, 1, 0, 0); // 重置为单位矩阵
    ctx.scale(devicePixelRatio, devicePixelRatio);

    // 重新绘制所有内容
    drawContent();
  }, []);

  // 示例绘图函数
  const drawContent = useCallback(() => {
    const ctx = ctxRef.current;
    const canvas = canvasRef.current;
    const parentElement = canvasParentRef.current;
    if (!ctx || !canvas || !parentElement) return;

    // 清空画布
    ctx.clearRect(0, 0, canvas.width / window.devicePixelRatio, canvas.height / window.devicePixelRatio);

    // 计算中心矩形的位置，基于逻辑（CSS）尺寸
    const rectWidth = 100;
    const rectHeight = 50;
    const canvasLogicalWidth = parentElement.getBoundingClientRect().width;
    const canvasLogicalHeight = parentElement.getBoundingClientRect().height;

    const startX = (canvasLogicalWidth / 2) - (rectWidth / 2);
    const startY = (canvasLogicalHeight / 2) - (rectHeight / 2);

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

    // 绘制另一个矩形，例如在中心矩形上方
    ctx.fillStyle = 'red';
    ctx.fillRect(startX, startY - 60, rectWidth, rectHeight);

  }, []);

  useEffect(() => {
    // 初始化时进行适配和绘制
    scaleCanvasForHighDPI();
    window.addEventListener('resize', scaleCanvasForHighDPI);

    return () => {
      window.removeEventListener('resize', scaleCanvasForHighDPI);
    };
  }, [scaleCanvasForHighDPI]);

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

export default CanvasComponent;

.canvasContainer {
  width: 100%; /* 使容器响应式 */
  height: 400px; /* 固定高度或根据需要设置 */
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  /* Canvas的style.width和style.height将由JS动态设置 */
  display: block; /* 移除Canvas底部空白 */
}

/**
 * 计算中心矩形的逻辑坐标
 * @param rectWidth 矩形的逻辑宽度
 * @param rectHeight 矩形的逻辑高度
 * @param canvasLogicalWidth Canvas的逻辑宽度（CSS宽度）
 * @param canvasLogicalHeight Canvas的逻辑高度（CSS高度）
 * @returns 包含矩形起始和结束逻辑坐标的对象
 */
const calculateCenterRectCoords = (
  rectWidth: number,
  rectHeight: number,
  canvasLogicalWidth: number,
  canvasLogicalHeight: number
) => {
  // 基于逻辑尺寸进行居中计算
  const startX = (canvasLogicalWidth / 2) - (rectWidth / 2);
  const startY = (canvasLogicalHeight / 2) - (rectHeight / 2);

  return {
    startX,
    startY,
    endX: startX + rectWidth,
    endY: startY + rectHeight,
  };
};

// 在 drawContent 函数内部
const canvasLogicalWidth = parentElement.getBoundingClientRect().width;
const canvasLogicalHeight = parentElement.getBoundingClientRect().height;

const rectWidth = 100;
const rectHeight = 50;

const { startX, startY } = calculateCenterRectCoords(
  rectWidth,
  rectHeight,
  canvasLogicalWidth,
  canvasLogicalHeight
);

ctx.fillStyle = 'blue';
ctx.fillRect(startX, startY, rectWidth, rectHeight); // 使用逻辑坐标绘制