HTML5画布图像加载程序教程

最新推荐文章于 2024-02-24 23:39:38 发布

limeiyans

最新推荐文章于 2024-02-24 23:39:38 发布

阅读量675

点赞数

分类专栏： HTML5画布图像加载程序教程文章标签： HTML5画布图像加载程序教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18271557

版权

HTML5画布图像加载程序教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当HTML5 Canvas应用程序需要多个图像,这通常是一个好主意来加载之前所有的图像画在画布上。为了简化加载过程,方便使用一个图像加载程序函数,它接受一个散列的图像资源,创建了一个散列的图片,然后调用一个用户定义函数时所有的图片都加载。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </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: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://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>