javascript - 如何用图像填充html5 Canvas 网格方 block ？

Question

我是html5 Canvas 的新手。我想绘制一个 Canvas 网格，并使用 API 响应中的图像填充每个网格方 block 。我有以下代码来绘制网格，但我正在努力用图像填充每个方 block 。这是js代码:

window.onload = function(){
    var c= document.getElementById('canvas');
    var ctx=c.getContext('2d');
    ctx.strokeStyle='white';
    ctx.linWidth=4;
    for(i=0;i<=600;i=i+60)
    {
      ctx.moveTo(i,0);
      ctx.lineTo(i,600);
      ctx.stroke();
    }

    for(j=0; j<=600; j=j+60)
    {
        ctx.moveTo(0,j);
        ctx.lineTo(600,j);
        ctx.stroke();
    }
}

此代码帮助我绘制 Canvas 网格，但如何访问每个方 block 并用图像填充它。我引用了与此相关的链接，但似乎很难理解。有人可以帮我解决这个问题吗？

Answer 1

如果不确切知道 api 响应如何返回图像，就很难回答您的问题。假设 api 响应返回图像本身(而不是 JSON 或类似内容中的图像数据)，这是一个解决方案:

html:

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript:

window.onload = function() {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  ctx.strokeStyle = "green";
  ctx.lineWidth = 4;

  //draw grid
  for (let i = 0; i <= 10; i++) {
    const x = i*60;
    ctx.moveTo(x, 0);
    ctx.lineTo(x, canvas.height);
    ctx.stroke();

    const y = i*60;
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }

  //draw images
  const p = ctx.lineWidth / 2; //padding
  for (let xCell = 0; xCell < 10; xCell++) {
    for (let yCell = 0; yCell < 10; yCell++) {
      const x = xCell * 60;
      const y = yCell * 60;
      const img = new Image();
      img.onload = function() {
        ctx.drawImage(img, x+p, y+p, 60-p*2, 60-p*2);
      };

      //TODO: set img.src to your api url instead of the dummyimage url.
      img.src = `https://dummyimage.com/60x60/000/fff&text=${xCell},${yCell}`;
    }
  }
};

工作示例:

https://codepen.io/rockysims/pen/dLZgBm