如何在固定宽高HTML Canvas上以网格模式平铺排列不同尺寸图片？

你需要的这类固定画布上的跨尺寸图片网格排布，本质是带密集填充规则的二维装箱问题，有非常成熟的现成方案，不需要从零开发：

可选实现路径 #

现成NPM包 #

• bin-pack：轻量零依赖的二维装箱计算库，排布逻辑和CSS Grid grid-auto-flow: dense完全对齐。你只需要传入画布总宽高、基础单元格尺寸、间距、每张图片的跨列/跨行数，就能直接输出每张图片对应的Canvas绘制坐标（x、y）和实际绘制宽高，在React中可以直接引入调用，不需要依赖DOM环境。
• react-canvas-grid-packer：针对React生态封装的专用组件，内置了图片预加载、排布计算、Canvas重绘逻辑，开箱支持间距配置、最小单元格尺寸设置、画布尺寸自适应，也支持自定义单张图片的跨格规则。

轻量手动实现（无依赖） #

如果不想引入第三方依赖，可以直接复刻CSS Grid dense模式的核心排布逻辑，代码量不到100行：

1. 根据固定画布宽度、设置的基础单元格宽度、间距，计算网格总列数：总列数 = Math.floor((画布宽度 + 间距) / (基础单元格宽度 + 间距))
2. 初始化一个长度等于总列数的高度记录数组，标记每一列当前的已占用高度，初始值全部为0
3. 遍历所有待放置的图片，优先查找能容纳当前图片（比如跨2列、跨2行）的最靠上、最靠左的空位，找到后就放置图片，同步更新对应列的已占用高度；如果当前位置空间不足，就向下/向后顺延查找空位，实现密集填充不浪费空间的效果
4. 根据每个图片占用的行列数、间距值，换算成Canvas上的实际像素坐标和尺寸即可

如果你的画布是固定高度而非无限滚动高度，只需要在排布时增加高度边界判断，对超出画布范围的图片做缩放或者截断处理即可。

React 中使用示例（基于bin-pack） #

import { useEffect, useRef } from 'react';
import pack from 'bin-pack';

const CanvasImageGrid = ({
  canvasWidth = 800,
  canvasHeight = 600,
  gap = 15,
  baseCell = 200,
  images = []
}) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const ctx = canvasRef.current.getContext('2d');
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    // 构造待排布元素，传入每张图的跨列、跨行数
    const packItems = images.map(img => ({
      width: img.spanCol * baseCell + (img.spanCol - 1) * gap,
      height: img.spanRow * baseCell + (img.spanRow - 1) * gap,
      src: img.src
    }));

    // 执行密集排布计算
    pack(packItems);

    // 逐张绘制到Canvas
    packItems.forEach(item => {
      const img = new Image();
      img.src = item.src;
      img.onload = () => {
        ctx.drawImage(img, item.x, item.y, item.width, item.height);
      };
    });
  }, [images, canvasWidth, canvasHeight, gap, baseCell]);

  return <canvas ref={canvasRef} width={canvasWidth} height={canvasHeight} />;
};

内容的提问来源于stack exchange，提问作者grabury