javascript - 更新图形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
}