当 HTML5 画布准备好时调用一个函数答案

【问题标题】：Call a function when HTML5 canvas is ready当 HTML5 画布准备好时调用一个函数
【发布时间】：2015-07-08 17:23:53
【问题描述】：

我在画布上加载了几个 PNG 图像，因此生成画布需要时间。

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

HTML：

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

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

}

【问题讨论】：

$(document).on("CanvasOnLoad", function(){}); 怎么样
你做了什么？信息不足以回答。
@Sushil 谢谢！你能给我一个更大的例子吗？
@fuyushimoya $("#myCanvas").ready(function() { $("#result").html("loaded"); });
你能发布你的代码吗？

标签： javascript jquery html canvas

【解决方案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();

&lt;canvas id="myCanvas" width="500" height="300"&gt;&lt;/canvas&gt;

【讨论】：

谢谢，“就绪”文本有效，但“加载”文本未打印在画布上...
我找不到足够大的图片来演示它。
我不知道他在不同的画布上使用该功能还是在一张上使用所有图像，如果他一对一使用它就足够了。
@fuyushimoya 我为一个画布元素使用了几张图片
多张图片也可以吗？

【解决方案2】：

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

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

【讨论】：

谢谢，但这对我不起作用。在加载图像之前调用该函数。

【解决方案3】：

只需使用“window.onload”事件即可。

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 */}

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

【讨论】：