Question

我将几张PNG图像加载到画布上，因此生成画布需要时间。

我想在加载画布时显示加载图标。如何检查画布是否正在加载或准备好？

HTML：

The mbstring extension is missing. Please check your PHP configuration.

使用Javascript：

parameter

Answer 1

也许这可以帮到你 HTML5 Canvas: Get Event when drawing is finished

如果它说是同步你可以在drawImage的末尾隐藏加载器。

Answer 2

创建画布或开始获取图像时，执行某些操作以指示用户正在加载图像，如果您还想使用画布通知用户图像已加载，请将该逻辑放入{{1} }。

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

img.onload

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

Answer 3

只需使用＆＃34; window.onload＆＃34;活动将有效。

canvasReady = false;
window.onload = function(){canvasReady = true; Main();}

//Do some loading stuff, when the canvas is ready, the event will trigger your main function to start.

Main(){/* do canvas-y stuff here */}

这是基础。加载画布后，可以调用启动画布应用程序的函数。

HTML5画布准备好后调用函数

3 个答案: