Question

Q1：我在一个多媒体网页设计课程中，我们正在翻阅图像并在绘制之前立即加载它们。该程序使用户函数loadImages获取源对象和一个名为callback的参数，然后运行一些循环来获取值，最后运行回调（图像），如果没有更多的图像要加载。 callback（）是js中的内置函数吗？

Q2：稍后在代码中调用loadImages（）时，参数是源（其中包含2个图像源的简单对象），最后一个参数是函数（图像），但图像仅在内部定义loadImages函数，所以与图像变量有关的方式是如何使用1作为函数（）的参数在loadImages中的参数，以及2如何使用它来加载带有images.darthVader等的实际图像。

感谢您的帮助。

   </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      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];
        }
      }
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var sources = {
        darthVader: 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'https://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

      loadImages(sources, function(images) {
        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
      });

    </script>
  </body>
</html>      
Demo

Answer 1

Q1和Q2实际上都是相关的问题。尽管我相信其他人会做得更好，但我会尽力解释他们。

Q1： callback()不是js中的内置函数，而是传递给loadImages的函数，就像loadImages(sources, function(images) {...}一样。调用callback(images)时，您实际上正在调用传入的函数：function(images) {...}。

Q2：您引用的images变量是代码在callback(images);函数中调用loadImages时设置的变量。这两个名字碰巧都是相同的，所以可能会让你感到困惑。

在这个程序中做什么回调参数？ html5 canvas javascript

1 个答案: