Измените src изображения без повторного инициирования элемента изображения

#javascript #image

Вопрос:

Я пытаюсь визуализировать довольно большое количество объектов (вероятно, около 200). Вот код, который у меня сейчас есть.

 Level={x:20,y:40,name:"Level",sprite:1,sprites:["brick.png","ground.png","question-mark-block.png"]}

function draw(self){
  SpriteRenderer=new Image();
  SpriteRenderer.src="sprites/" self.name "/" self.sprites[self.sprite-1]
  ctx.save();
  ctx.translate(self.x,self.y);
  ctx.drawImage(SpriteRenderer,-SpriteRenderer.width/2,- 
  SpriteRenderer.height/2);
  ctx.restore()
}
 

Это работает нормально, но повторное инициирование элемента изображения довольно неэффективно с точки зрения ресурсов. Как изменить src изображения без повторного инициирования элемента изображения?

Кроме того, если бы существовал другой объект, например объект врагов, он также мог бы вызвать эту функцию

Комментарии:

1. Что такое SpriteRenderer? Где он используется? Как он используется? Разве вы не можете просто получить его, используя getElementById или что-то в этом роде, и просто изменить его src? Что вы пробовали, что могли бы нам показать?

2. @AlexandreElshobokshy Я добавил больше кода в вопрос