HTML5 canvas准备就绪时调用一个函数 [英] Call a function when HTML5 canvas is ready

问题描述

我在画布上加载了多个PNG图像，因此生成画布需要花费时间.

I load several PNG images onto my canvas, so it takes time to generate the canvas.

我想在加载画布时显示一个加载图标.如何检查画布是否正在加载或准备就绪?

I want to show a loading icon when the canvas is loading. How do I check if the canvas is loading or ready?

HTML:

<canvas id="myCanvas" width="1300" height="800"></canvas>

JavaScript:

Javascript:

function buildCanvas(settings){


          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var ctx = canvas.getContext("2d");

          var background = new Image();
          background.onload = function() {
            context.drawImage(background, 0, 0, 1300, 836);
          };
          background.src = 'data/skin-army.png'; 

}

推荐答案

在创建画布或开始获取图像时，请执行一些操作以指示用户正在加载图像，如果您还想使用画布来通知用户加载图像，然后将逻辑放入img.onload.

When created a canvas or start to fetch the image, do something to indicate user that image is loading, and if you also want to use the canvas to notify user that the image is loaded, put that logic in img.onload.

找到了足够大的图片进行演示，应该能够看到单词的变化.

Found a large enough pic to demonstrate, should able to see the words change.

function buildCanvas(settings){

          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          var ctx = canvas.getContext("2d");
          var images = [
            'http://www.fmglobal.com/assets/images/library/download/hydraulicslab_1.jpg',
            'http://www.fmglobal.com/assets/images/library/download/Fireslope.jpg',
            'http://www.fmglobal.com/assets/images/library/download/Firefighter_firetest.jpg',
            'http://www.fmglobal.com/assets/images/library/download/rowsprinklers.jpg'
          ];
          var imagesLoading = images.length;
          
          // Image loader.
          var loadImage = function(i) {
             var img = new Image();
             img.onload = function() {
               images[i] = img;
               --imagesLoading;
               // Call the complete callback when all images loaded.
               if (imagesLoading === 0) {
                 workDone();
               }
             };
             img.src = images[i];
          };
          
          // Call upon all images loaded.
          var workDone = function() {
            // Clear canvas
            canvas.width = canvas.width;
            
             // Anything you want to notify the user image is Ready.
            ctx.fillText("Ready", 100, 130);
            
            
            var i, iLen = images.length;
            for (i = 0; i < iLen; ++i) {
              context.drawImage(images[i], 100*i, 0, 100*(i+1), 100);
            }
          };
           
          // Start to load all images.
          var i;
          for(i = 0; i < imagesLoading; ++i) {
            loadImage(i);
          }
  
          // Show image loading. with animation or something else...
          ctx.fillText("loading", 100,  130);
}

buildCanvas();

<canvas id="myCanvas" width="500" height="300"></canvas>

这篇关于HTML5 canvas准备就绪时调用一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！