Question

我正在尝试构建一个自行车配置器。这是我的问题。

如何加载和构建图像阵列以构建自行车和另一个带有右侧部件的阵列，当用户点击该部件并将其加载到自行车的左侧时，无需再次预加载整个画布。新图像的宽度和高度相同，并且应位于相同的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>

如何在按钮点击时更改图像two.jpg。按钮应该在画布外面。

Answer 1

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);

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

1 个答案: