Как заполнить html5 квадраты сетки холста изображением?

Question

Я новичок в html5 canvas. Я хочу нарисовать одну сетку холста и заполнить каждый квадрат сетки изображением из ответа API. У меня есть следующий код для рисования сетки, но я изо всех сил стараюсь заполнить каждый квадрат изображением. Это код 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();
    }
}

Этот код помогает мне рисовать сетку холста, но как получить доступ к каждому квадрату и заполнить его изображением. Я ссылался на ссылки, связанные с этим, но, кажется, трудно понять. Может кто-нибудь помочь мне с этим?

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