Javascript 如何在html5画布中加载图像数组并在单击按钮时交换其中一个图像

我正在尝试建立一个自行车配置程序。这是我的问题

我如何加载和排列图像以构建自行车和另一个右侧有零件的阵列，当用户单击时，我从中获取零件并将其加载到左侧自行车所在的位置，而无需再次预加载整个画布。新图像将具有相同的宽度和高度，并且应位于相同的x/y位置。这就是我加载和排列图像的方式，但我不知道如何交换它们。我知道我不能清除画布上加载的图像，我必须在顶部绘制新的图像，但我不知道如何

<script type="text/javascript" charset="utf-8">
function loadImages(sources, callback){
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
      numImages++;
    }
    for (var src in sources) {
      images[src] = new Image();
      images[src].onload = function(){
        if (++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

window.onload = function(images){
  var canvas = document.getElementById("config");
  var context = canvas.getContext("2d");

  var sources = {
      one: "one.jpg",
      two: "two.jpg"
  };

  loadImages(sources, function(images){
      context.drawImage(images.one, 100, 100, 180, 200);
      context.drawImage(images.two, 280, 100, 180, 200);
      });
};
</script>

函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
//获取源的数量
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
window.onload=函数（图像）{
var canvas=document.getElementById（“配置”）；
var context=canvas.getContext（“2d”）；
风险值来源={
一个：“one.jpg”，
二：“二.jpg”
};
加载图像（源、函数（图像）{
背景。drawImage（images.one100100180200）；
背景。drawImage（images.two，280100180200）；
});
};

如何在单击按钮时更改image two.jpg。按钮应该在画布外。

您查看了吗？

button.addEventListener('click', function () {
  canvas.width = canvas.width; // redraws canvas
  sources.two = 'three.jpg';

  // fyi, you are drawing the images as many times as there are sources.
  loadImages(sources, function(images){
      context.drawImage(images.one, 100, 100, 180, 200);
      context.drawImage(images.two, 280, 100, 180, 200);
   });
}, false);