在画布上绘制图像循环不工作

时间:2017-07-19 09:56:36

标签: javascript jquery html5 canvas

var canvas = document.getElementById("canvas");
wheel = canvas.getContext("2d");          
for (var i = 0; i < 10; i++) {
  var img = new Image;
  img.src = image;
  wheel.drawImage(img, -170, -10, 140, 140);
}

我上面的代码只绘制了9个(9个)图像,但是lastOne(第10个)图像没有在画布上绘制。我试过上面的代码,但没有成功。任何人都可以知道这个问题的解决方案。

  

任何人都可以帮我找到在线 JSFiddle Demo ,它可以在画布上循环绘制图像。

2 个答案:

答案 0 :(得分:2)

在第一次抽奖尝试之前,您的图像可能尚未完成加载。

以下是确保您的图片已完成加载的语法:

&#13;
&#13;
var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.width = 1100;
canvas.height = 110;
var wheel = canvas.getContext("2d");
var img = document.createElement("img");
img.onload = function() {
  for (var i = 0; i < 10; i++) {
    wheel.drawImage(img, 5 + 110 * i, 5);
  }
};
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
&#13;
&#13;
&#13;

编辑1 - PROMISES

使用多张图片:

  1. 列出来源
  2. map生成DOM节点
  3. Promise
  4. 中为每个DOM节点设置Promise.all
  5. 然后绘制图像
  6. &#13;
    &#13;
    var canvas = document.body.appendChild(document.createElement("canvas"));
    canvas.width = 1100;
    canvas.height = 110;
    var wheel = canvas.getContext("2d");
    var images = [
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=4&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=5&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=6&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=7&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=8&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=9&w=100&h=100",
        "https://placeholdit.imgix.net/~text?txtsize=60&txt=10&w=100&h=100",
      ]
      .map(function(i) {
        var img = document.createElement("img");
        img.src = i;
        return img;
      });
    Promise.all(images.map(function(image) {
        return new Promise(function(resolve, reject) {
          image.onload = resolve;
        });
      }))
      .then(function() {
        for (var i = 0; i < images.length; i++) {
          var img = images[i];
          wheel.drawImage(img, 5 + 110 * i, 5);
        }
      });
    &#13;
    &#13;
    &#13;

答案 1 :(得分:2)

我会对Emil采用类似的方法,只有差异有一个单独加载它们的方法,一旦图像加载,尝试加​​载下一个等等......

看看:

var canvas = document.getElementById("canvas");

// setting canvas size
canvas.height = window.innerHeight - 10;
canvas.width = window.innerWidth - 10;

var image_test = document.querySelector(".hidden");
var count = 0;
var total_images = 10;
var wheel = canvas.getContext("2d");      
function loadImage() { 
  var img = new Image();
  img.onload = function() { 
    wheel.drawImage( this , 105 * count , 0 , 100, 100);
    if( count < total_images ) { 
        count++;
      loadImage();
    }
  }
  // img.src = "image-" + count + ".jpg";
  img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";
}
loadImage();

https://jsfiddle.net/gugalondon/r5xw6u7L/7