Блог

Я новичок в 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();
    }
}
 

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

Трудно ответить на ваш вопрос, не зная точно, как изображение возвращается ответом 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/fffamp;text=${xCell},${yCell}`;
    }
  }
};
 

Рабочий пример:

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