javascript - 在不重新启动图像元素的情况下更改图像 src

Question

我正在尝试渲染大量对象（可能大约 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()
}

它工作正常，但重新启动 Image 元素是相当低效的资源。如何在不重新启动 Image 元素的情况下更改图像的 src？

此外，如果存在另一个对象，例如敌人对象，它也可以调用此函数

标签： javascriptimage