drawImage 不显示图像

Question

function render()
{
    canvasBackground.drawImage(images[0], 0, canvas.height / 2, canvas.width, canvas.height / 2);
}

function initImages(paths)
{
    requiredImages = paths.length;
    for (i in paths)
    {
        var img = new Image();
        img.src = paths[i];
        images[i] = img;
        images[i].onload = function ()
        {
            doneImages++;
        }
    }
}

function checkImages()
{
    if (doneImages >= requiredImages)
    {
        loop();
    }
    else
    {
        setTimeout(function ()
        {
            checkImages();
        }, 1);
    }
}

initImages(["picture.png"]);
checkImages();

我确实做到了，但没有任何显示，知道如何解决这个问题吗？

顺便说一句，我没有向您展示循环函数，而循环函数又运行渲染函数。

Answer 1

这是您的代码的重构版本。

它递增doneImages，直到等于paths.length（此时所有图像都已完全加载）。

然后在每个图像索引上调用render。

顺便说一句，您的渲染功能会通过拉伸图像来扭曲图像。我认为这是故意的？

示例代码和演示：

var canvas=document.getElementById("canvas");
var canvasBackground=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var images=[];
var paths=[];
paths.push('https://dl.dropboxusercontent.com/u/139992952/multple/animated.gif');
paths.push('https://dl.dropboxusercontent.com/u/139992952/multple/ball1.png');

initImages(paths);

function render(i)
{
  canvasBackground.drawImage(images[i], 0, canvas.height / 2, canvas.width, canvas.height / 2);
}

function initImages(paths)
{
  var doneImages=0;
  for (i in paths)
  {
    var img = new Image();
    img.src = paths[i];
    images[i] = img;
    images[i].onload = function ()
    {
      // just return if all the images aren't loaded yet
      if(++doneImages<paths.length){return;}

      for(var i=0;i<images.length;i++){ render(i); }

    }
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

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