线性渐变只有一个轴，并且在垂直方向填充容器。换句话说，你只能控制一个颜色在轴上的宽度，这样就不可能在大于1px的div中创建1px x 1px的颜色。
因此，实现重绘的唯一方法是创建一个高度为1px的div堆栈（或宽度为1px的列）。
然后，您可以通过为每个颜色添加两个停止点来沿主轴将颜色包含在1px内，以指示主轴的起点和终点。

const scale = 0.1;

const canvas = document.querySelector('canvas');

const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = onload;

fetch('https://i.kym-cdn.com/entries/icons/original/000/006/428/637738.jpg')
  .then((res) => res.blob())
  .then((blob) => (img.src = URL.createObjectURL(blob)));

function onload() {
  const w = img.width * scale;
  const h = img.height * scale;
  canvas.width = w;
  canvas.height = h;
  canvas.style.width = w.toString() + 'px';
  canvas.style.height = h.toString() + 'px';

  ctx.drawImage(img, 0, 0, w, h);

  const pixelData = Array.from(ctx.getImageData(0, 0, w, h).data);

  for (let row = 0; row < h; row++) {
    const rowDiv = document.createElement('div');
    rowDiv.style.width = w.toString() + 'px';
    rowDiv.style.height = '1px';

    const rowStart = row * w * 4;
    let background = 'linear-gradient(to right,';
    for (let col = 0; col < w; col++) {
      const pixelStart = rowStart + col * 4;
      background +=
        'rgba(' +
        pixelData[pixelStart] +
        ',' +
        pixelData[pixelStart + 1] +
        ',' +
        pixelData[pixelStart + 2] +
        ',' +
        pixelData[pixelStart + 3] +
        ')' + col + 'px ' + (col + 1) + 'px,';
    }
    rowDiv.style.background = background.slice(0, -1) + ')';
    document.body.append(rowDiv);
  }
}

<h1>Canvas</h1>
<canvas></canvas>

<h1>Gradients</h1>

但是在这一点上，你可能只是为每个像素创建一个div。