Лучший способ обработки изображений при обновлении графики Javascript

Question

Итак, в этом проекте, который я пишу, у меня есть колесо с изображениями.Они рисуются с помощью функции canvas.getContext ('2d'). DrawImage () .Моя первая идея состояла в том, чтобы я просто получил img в цикле следующим образом:

while(wheel){

    //all other code ^^        

    var imageObj = new Image();
    imageObj.src = getImgFromKeyword(passedLocations[i].keyword); //Will return a URL to an image
    var x = Math.cos(dp/2 + dp * i ) * (pr -  startPosInSlice) - imgsize/2;
    var y = Math.sin(dp/2 + dp * i ) * (pr - startPosInSlice) - imgsize/2;
    ctx.drawImage(imageObj, x, y, imgsize, imgsize);
}

Однако, поскольку я запускаю это в цикле, я фактически загружаю этот URL буквально ТЫСЯЧИ тысяч раз.Я считаю, что этого будет недостаточно для времени выполнения.Будет ли сохранение изображений в массиве при инициализации и затем обращение к этому объекту на чертеже более эффективным.

С уважением

Answer 1

Вы не должны каждый раз переопределять imageObj, поэтому вам нужно поместить это вне цикла.Также бесполезно каждый раз сбрасывать свойство src, так что это будет лучшим способом:

let imageObj = new Image();
imageObj.src = // load url
while (wheel) {
  // draw your stuff
}